@editorjs/header 2.8.0 → 2.8.2
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.
- package/README.md +3 -20
- package/dist/header.mjs +49 -48
- package/dist/header.umd.js +2 -2
- package/dist/index.d.ts +242 -0
- package/package.json +7 -3
package/README.md
CHANGED
|
@@ -6,36 +6,19 @@ Provides Headings Blocks for the [Editor.js](https://ifmo.su/editor).
|
|
|
6
6
|
|
|
7
7
|
## Installation
|
|
8
8
|
|
|
9
|
-
### Install via NPM
|
|
10
|
-
|
|
11
9
|
Get the package
|
|
12
10
|
|
|
13
11
|
```shell
|
|
14
|
-
|
|
12
|
+
yarn add @editorjs/header
|
|
15
13
|
```
|
|
16
14
|
|
|
17
15
|
Include module at your application
|
|
18
16
|
|
|
19
17
|
```javascript
|
|
20
|
-
|
|
18
|
+
import Header from '@editorjs/header';
|
|
21
19
|
```
|
|
22
20
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
1. Upload folder `dist` from repository
|
|
26
|
-
2. Add `dist/bundle.js` file to your page.
|
|
27
|
-
|
|
28
|
-
### Load from CDN
|
|
29
|
-
|
|
30
|
-
You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@editorjs/header).
|
|
31
|
-
|
|
32
|
-
`https://cdn.jsdelivr.net/npm/@editorjs/header@latest`
|
|
33
|
-
|
|
34
|
-
Then require this script on page with Editor.js.
|
|
35
|
-
|
|
36
|
-
```html
|
|
37
|
-
<script src="..."></script>
|
|
38
|
-
```
|
|
21
|
+
Optionally, you can load this tool from CDN [JsDelivr CDN](https://cdn.jsdelivr.net/npm/@editorjs/header@latest)
|
|
39
22
|
|
|
40
23
|
## Usage
|
|
41
24
|
|
package/dist/header.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ce-header{padding:.6em 0 3px;margin:0;line-height:1.25em;outline:none}.ce-header p,.ce-header div{padding:0!important;margin:0!important}.ce-header[contentEditable=true][data-placeholder]:before{position:absolute;content:attr(data-placeholder);color:#707684;font-weight:400;display:none;cursor:text}.ce-header[contentEditable=true][data-placeholder]:empty:before{display:block}.ce-header[contentEditable=true][data-placeholder]:empty:focus:before{display:none}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
-
const
|
|
2
|
+
const a = '<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>', l = '<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>', o = '<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>', h = '<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>', d = '<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>', u = '<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>', g = '<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="M9 7L9 12M9 17V12M9 12L15 12M15 7V12M15 17L15 12"/></svg>';
|
|
3
3
|
/**
|
|
4
4
|
* Header block for the Editor.js.
|
|
5
5
|
*
|
|
@@ -8,21 +8,18 @@ const i = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="
|
|
|
8
8
|
* @license MIT
|
|
9
9
|
* @version 2.0.0
|
|
10
10
|
*/
|
|
11
|
-
class
|
|
11
|
+
class v {
|
|
12
|
+
constructor({ data: e, config: t, api: s, readOnly: r }) {
|
|
13
|
+
this.api = s, this.readOnly = r, this._settings = t, this._data = this.normalizeData(e), this._element = this.getTag();
|
|
14
|
+
}
|
|
12
15
|
/**
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
* @param {{data: HeaderData, config: HeaderConfig, api: object}}
|
|
16
|
-
* data — previously saved data
|
|
17
|
-
* config - user config for Tool
|
|
18
|
-
* api - Editor.js API
|
|
19
|
-
* readOnly - read only mode flag
|
|
16
|
+
* Styles
|
|
20
17
|
*/
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
get _CSS() {
|
|
19
|
+
return {
|
|
23
20
|
block: this.api.styles.block,
|
|
24
21
|
wrapper: "ce-header"
|
|
25
|
-
}
|
|
22
|
+
};
|
|
26
23
|
}
|
|
27
24
|
/**
|
|
28
25
|
* Normalize input data
|
|
@@ -33,8 +30,8 @@ class c {
|
|
|
33
30
|
* @private
|
|
34
31
|
*/
|
|
35
32
|
normalizeData(e) {
|
|
36
|
-
const t = {};
|
|
37
|
-
return typeof e != "object" && (e = {}), t.text = e.text || "", t.level = parseInt(e.level) || this.defaultLevel.number, t;
|
|
33
|
+
const t = { text: "", level: this.defaultLevel.number };
|
|
34
|
+
return typeof e != "object" && (e = {}), t.text = e.text || "", t.level = parseInt(e.level.toString()) || this.defaultLevel.number, t;
|
|
38
35
|
}
|
|
39
36
|
/**
|
|
40
37
|
* Return Tool's view
|
|
@@ -56,7 +53,8 @@ class c {
|
|
|
56
53
|
label: this.api.i18n.t(`Heading ${e.number}`),
|
|
57
54
|
onActivate: () => this.setLevel(e.number),
|
|
58
55
|
closeOnActivate: !0,
|
|
59
|
-
isActive: this.currentLevel.number === e.number
|
|
56
|
+
isActive: this.currentLevel.number === e.number,
|
|
57
|
+
render: () => document.createElement("div")
|
|
60
58
|
}));
|
|
61
59
|
}
|
|
62
60
|
/**
|
|
@@ -209,32 +207,32 @@ class c {
|
|
|
209
207
|
{
|
|
210
208
|
number: 1,
|
|
211
209
|
tag: "H1",
|
|
212
|
-
svg:
|
|
210
|
+
svg: a
|
|
213
211
|
},
|
|
214
212
|
{
|
|
215
213
|
number: 2,
|
|
216
214
|
tag: "H2",
|
|
217
|
-
svg:
|
|
215
|
+
svg: l
|
|
218
216
|
},
|
|
219
217
|
{
|
|
220
218
|
number: 3,
|
|
221
219
|
tag: "H3",
|
|
222
|
-
svg:
|
|
220
|
+
svg: o
|
|
223
221
|
},
|
|
224
222
|
{
|
|
225
223
|
number: 4,
|
|
226
224
|
tag: "H4",
|
|
227
|
-
svg:
|
|
225
|
+
svg: h
|
|
228
226
|
},
|
|
229
227
|
{
|
|
230
228
|
number: 5,
|
|
231
229
|
tag: "H5",
|
|
232
|
-
svg:
|
|
230
|
+
svg: d
|
|
233
231
|
},
|
|
234
232
|
{
|
|
235
233
|
number: 6,
|
|
236
234
|
tag: "H6",
|
|
237
|
-
svg:
|
|
235
|
+
svg: u
|
|
238
236
|
}
|
|
239
237
|
];
|
|
240
238
|
return this._settings.levels ? e.filter(
|
|
@@ -247,32 +245,35 @@ class c {
|
|
|
247
245
|
* @param {PasteEvent} event - event with pasted content
|
|
248
246
|
*/
|
|
249
247
|
onPaste(e) {
|
|
250
|
-
const t = e.detail
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
248
|
+
const t = e.detail;
|
|
249
|
+
if ("data" in t) {
|
|
250
|
+
const s = t.data;
|
|
251
|
+
let r = this.defaultLevel.number;
|
|
252
|
+
switch (s.tagName) {
|
|
253
|
+
case "H1":
|
|
254
|
+
r = 1;
|
|
255
|
+
break;
|
|
256
|
+
case "H2":
|
|
257
|
+
r = 2;
|
|
258
|
+
break;
|
|
259
|
+
case "H3":
|
|
260
|
+
r = 3;
|
|
261
|
+
break;
|
|
262
|
+
case "H4":
|
|
263
|
+
r = 4;
|
|
264
|
+
break;
|
|
265
|
+
case "H5":
|
|
266
|
+
r = 5;
|
|
267
|
+
break;
|
|
268
|
+
case "H6":
|
|
269
|
+
r = 6;
|
|
270
|
+
break;
|
|
271
|
+
}
|
|
272
|
+
this._settings.levels && (r = this._settings.levels.reduce((n, i) => Math.abs(i - r) < Math.abs(n - r) ? i : n)), this.data = {
|
|
273
|
+
level: r,
|
|
274
|
+
text: s.innerHTML
|
|
275
|
+
};
|
|
271
276
|
}
|
|
272
|
-
this._settings.levels && (s = this._settings.levels.reduce((r, n) => Math.abs(n - s) < Math.abs(r - s) ? n : r)), this.data = {
|
|
273
|
-
level: s,
|
|
274
|
-
text: t.innerHTML
|
|
275
|
-
};
|
|
276
277
|
}
|
|
277
278
|
/**
|
|
278
279
|
* Used by Editor.js paste handling API.
|
|
@@ -294,11 +295,11 @@ class c {
|
|
|
294
295
|
*/
|
|
295
296
|
static get toolbox() {
|
|
296
297
|
return {
|
|
297
|
-
icon:
|
|
298
|
+
icon: g,
|
|
298
299
|
title: "Heading"
|
|
299
300
|
};
|
|
300
301
|
}
|
|
301
302
|
}
|
|
302
303
|
export {
|
|
303
|
-
|
|
304
|
+
v as default
|
|
304
305
|
};
|
package/dist/header.umd.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ce-header{padding:.6em 0 3px;margin:0;line-height:1.25em;outline:none}.ce-header p,.ce-header div{padding:0!important;margin:0!important}.ce-header[contentEditable=true][data-placeholder]:before{position:absolute;content:attr(data-placeholder);color:#707684;font-weight:400;display:none;cursor:text}.ce-header[contentEditable=true][data-placeholder]:empty:before{display:block}.ce-header[contentEditable=true][data-placeholder]:empty:focus:before{display:none}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
-
(function(n,
|
|
2
|
+
(function(n,s){typeof exports=="object"&&typeof module<"u"?module.exports=s():typeof define=="function"&&define.amd?define(s):(n=typeof globalThis<"u"?globalThis:n||self,n.Header=s())})(this,function(){"use strict";const n="",s='<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>',a='<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>',h='<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>',d='<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>',u='<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>',c='<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>',g='<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="M9 7L9 12M9 17V12M9 12L15 12M15 7V12M15 17L15 12"/></svg>';/**
|
|
3
3
|
* Header block for the Editor.js.
|
|
4
4
|
*
|
|
5
5
|
* @author CodeX (team@ifmo.su)
|
|
6
6
|
* @copyright CodeX 2018
|
|
7
7
|
* @license MIT
|
|
8
8
|
* @version 2.0.0
|
|
9
|
-
*/class
|
|
9
|
+
*/class v{constructor({data:e,config:t,api:i,readOnly:r}){this.api=i,this.readOnly=r,this._settings=t,this._data=this.normalizeData(e),this._element=this.getTag()}get _CSS(){return{block:this.api.styles.block,wrapper:"ce-header"}}normalizeData(e){const t={text:"",level:this.defaultLevel.number};return typeof e!="object"&&(e={}),t.text=e.text||"",t.level=parseInt(e.level.toString())||this.defaultLevel.number,t}render(){return this._element}renderSettings(){return this.levels.map(e=>({icon:e.svg,label:this.api.i18n.t(`Heading ${e.number}`),onActivate:()=>this.setLevel(e.number),closeOnActivate:!0,isActive:this.currentLevel.number===e.number,render:()=>document.createElement("div")}))}setLevel(e){this.data={level:e,text:this.data.text}}merge(e){const t={text:this.data.text+e.text,level:this.data.level};this.data=t}validate(e){return e.text.trim()!==""}save(e){return{text:e.innerHTML,level:this.currentLevel.number}}static get conversionConfig(){return{export:"text",import:"text"}}static get sanitize(){return{level:!1,text:{}}}static get isReadOnlySupported(){return!0}get data(){return this._data.text=this._element.innerHTML,this._data.level=this.currentLevel.number,this._data}set data(e){if(this._data=this.normalizeData(e),e.level!==void 0&&this._element.parentNode){const t=this.getTag();t.innerHTML=this._element.innerHTML,this._element.parentNode.replaceChild(t,this._element),this._element=t}e.text!==void 0&&(this._element.innerHTML=this._data.text||"")}getTag(){const e=document.createElement(this.currentLevel.tag);return e.innerHTML=this._data.text||"",e.classList.add(this._CSS.wrapper),e.contentEditable=this.readOnly?"false":"true",e.dataset.placeholder=this.api.i18n.t(this._settings.placeholder||""),e}get currentLevel(){let e=this.levels.find(t=>t.number===this._data.level);return e||(e=this.defaultLevel),e}get defaultLevel(){if(this._settings.defaultLevel){const e=this.levels.find(t=>t.number===this._settings.defaultLevel);if(e)return e;console.warn("(ง'̀-'́)ง Heading Tool: the default level specified was not found in available levels")}return this.levels[1]}get levels(){const e=[{number:1,tag:"H1",svg:s},{number:2,tag:"H2",svg:a},{number:3,tag:"H3",svg:h},{number:4,tag:"H4",svg:d},{number:5,tag:"H5",svg:u},{number:6,tag:"H6",svg:c}];return this._settings.levels?e.filter(t=>this._settings.levels.includes(t.number)):e}onPaste(e){const t=e.detail;if("data"in t){const i=t.data;let r=this.defaultLevel.number;switch(i.tagName){case"H1":r=1;break;case"H2":r=2;break;case"H3":r=3;break;case"H4":r=4;break;case"H5":r=5;break;case"H6":r=6;break}this._settings.levels&&(r=this._settings.levels.reduce((l,o)=>Math.abs(o-r)<Math.abs(l-r)?o:l)),this.data={level:r,text:i.innerHTML}}}static get pasteConfig(){return{tags:["H1","H2","H3","H4","H5","H6"]}}static get toolbox(){return{icon:g,title:"Heading"}}}return v});
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
import { API, BlockTune, PasteEvent } from '@editorjs/editorjs';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @description Tool's input and output data format
|
|
5
|
+
*/
|
|
6
|
+
export interface HeaderData {
|
|
7
|
+
/** Header's content */
|
|
8
|
+
text: string;
|
|
9
|
+
/** Header's level from 1 to 6 */
|
|
10
|
+
level: number;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* @description Tool's config from Editor
|
|
14
|
+
*/
|
|
15
|
+
export interface HeaderConfig {
|
|
16
|
+
/** Block's placeholder */
|
|
17
|
+
placeholder?: string;
|
|
18
|
+
/** Heading levels */
|
|
19
|
+
levels?: number[];
|
|
20
|
+
/** Default level */
|
|
21
|
+
defaultLevel?: number;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* @description Heading level information
|
|
25
|
+
*/
|
|
26
|
+
interface Level {
|
|
27
|
+
/** Level number */
|
|
28
|
+
number: number;
|
|
29
|
+
/** HTML tag corresponding with level number */
|
|
30
|
+
tag: string;
|
|
31
|
+
/** Icon */
|
|
32
|
+
svg: string;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* @description Constructor arguments for Header
|
|
36
|
+
*/
|
|
37
|
+
interface ConstructorArgs {
|
|
38
|
+
/** Previously saved data */
|
|
39
|
+
data: HeaderData;
|
|
40
|
+
/** User config for the tool */
|
|
41
|
+
config: HeaderConfig;
|
|
42
|
+
/** Editor.js API */
|
|
43
|
+
api: API;
|
|
44
|
+
/** Read-only mode flag */
|
|
45
|
+
readOnly: boolean;
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Header block for the Editor.js.
|
|
49
|
+
*
|
|
50
|
+
* @author CodeX (team@ifmo.su)
|
|
51
|
+
* @copyright CodeX 2018
|
|
52
|
+
* @license MIT
|
|
53
|
+
* @version 2.0.0
|
|
54
|
+
*/
|
|
55
|
+
export default class Header {
|
|
56
|
+
/**
|
|
57
|
+
* Render plugin`s main Element and fill it with saved data
|
|
58
|
+
*
|
|
59
|
+
* @param {{data: HeaderData, config: HeaderConfig, api: object}}
|
|
60
|
+
* data — previously saved data
|
|
61
|
+
* config - user config for Tool
|
|
62
|
+
* api - Editor.js API
|
|
63
|
+
* readOnly - read only mode flag
|
|
64
|
+
*/
|
|
65
|
+
/**
|
|
66
|
+
* Editor.js API
|
|
67
|
+
* @private
|
|
68
|
+
*/
|
|
69
|
+
private api;
|
|
70
|
+
/**
|
|
71
|
+
* Read-only mode flag
|
|
72
|
+
* @private
|
|
73
|
+
*/
|
|
74
|
+
private readOnly;
|
|
75
|
+
/**
|
|
76
|
+
* Tool's settings passed from Editor
|
|
77
|
+
* @private
|
|
78
|
+
*/
|
|
79
|
+
private _settings;
|
|
80
|
+
/**
|
|
81
|
+
* Block's data
|
|
82
|
+
* @private
|
|
83
|
+
*/
|
|
84
|
+
private _data;
|
|
85
|
+
/**
|
|
86
|
+
* Main Block wrapper
|
|
87
|
+
* @private
|
|
88
|
+
*/
|
|
89
|
+
private _element;
|
|
90
|
+
constructor({ data, config, api, readOnly }: ConstructorArgs);
|
|
91
|
+
/**
|
|
92
|
+
* Styles
|
|
93
|
+
*/
|
|
94
|
+
private get _CSS();
|
|
95
|
+
/**
|
|
96
|
+
* Normalize input data
|
|
97
|
+
*
|
|
98
|
+
* @param {HeaderData} data - saved data to process
|
|
99
|
+
*
|
|
100
|
+
* @returns {HeaderData}
|
|
101
|
+
* @private
|
|
102
|
+
*/
|
|
103
|
+
normalizeData(data: HeaderData): HeaderData;
|
|
104
|
+
/**
|
|
105
|
+
* Return Tool's view
|
|
106
|
+
*
|
|
107
|
+
* @returns {HTMLHeadingElement}
|
|
108
|
+
* @public
|
|
109
|
+
*/
|
|
110
|
+
render(): HTMLHeadingElement;
|
|
111
|
+
/**
|
|
112
|
+
* Returns header block tunes config
|
|
113
|
+
*
|
|
114
|
+
* @returns {Array}
|
|
115
|
+
*/
|
|
116
|
+
renderSettings(): BlockTune[];
|
|
117
|
+
/**
|
|
118
|
+
* Callback for Block's settings buttons
|
|
119
|
+
*
|
|
120
|
+
* @param {number} level - level to set
|
|
121
|
+
*/
|
|
122
|
+
setLevel(level: number): void;
|
|
123
|
+
/**
|
|
124
|
+
* Method that specified how to merge two Text blocks.
|
|
125
|
+
* Called by Editor.js by backspace at the beginning of the Block
|
|
126
|
+
*
|
|
127
|
+
* @param {HeaderData} data - saved data to merger with current block
|
|
128
|
+
* @public
|
|
129
|
+
*/
|
|
130
|
+
merge(data: HeaderData): void;
|
|
131
|
+
/**
|
|
132
|
+
* Validate Text block data:
|
|
133
|
+
* - check for emptiness
|
|
134
|
+
*
|
|
135
|
+
* @param {HeaderData} blockData — data received after saving
|
|
136
|
+
* @returns {boolean} false if saved data is not correct, otherwise true
|
|
137
|
+
* @public
|
|
138
|
+
*/
|
|
139
|
+
validate(blockData: HeaderData): boolean;
|
|
140
|
+
/**
|
|
141
|
+
* Extract Tool's data from the view
|
|
142
|
+
*
|
|
143
|
+
* @param {HTMLHeadingElement} toolsContent - Text tools rendered view
|
|
144
|
+
* @returns {HeaderData} - saved data
|
|
145
|
+
* @public
|
|
146
|
+
*/
|
|
147
|
+
save(toolsContent: HTMLHeadingElement): HeaderData;
|
|
148
|
+
/**
|
|
149
|
+
* Allow Header to be converted to/from other blocks
|
|
150
|
+
*/
|
|
151
|
+
static get conversionConfig(): {
|
|
152
|
+
export: string;
|
|
153
|
+
import: string;
|
|
154
|
+
};
|
|
155
|
+
/**
|
|
156
|
+
* Sanitizer Rules
|
|
157
|
+
*/
|
|
158
|
+
static get sanitize(): {
|
|
159
|
+
level: boolean;
|
|
160
|
+
text: {};
|
|
161
|
+
};
|
|
162
|
+
/**
|
|
163
|
+
* Returns true to notify core that read-only is supported
|
|
164
|
+
*
|
|
165
|
+
* @returns {boolean}
|
|
166
|
+
*/
|
|
167
|
+
static get isReadOnlySupported(): boolean;
|
|
168
|
+
/**
|
|
169
|
+
* Get current Tools`s data
|
|
170
|
+
*
|
|
171
|
+
* @returns {HeaderData} Current data
|
|
172
|
+
* @private
|
|
173
|
+
*/
|
|
174
|
+
get data(): HeaderData;
|
|
175
|
+
/**
|
|
176
|
+
* Store data in plugin:
|
|
177
|
+
* - at the this._data property
|
|
178
|
+
* - at the HTML
|
|
179
|
+
*
|
|
180
|
+
* @param {HeaderData} data — data to set
|
|
181
|
+
* @private
|
|
182
|
+
*/
|
|
183
|
+
set data(data: HeaderData);
|
|
184
|
+
/**
|
|
185
|
+
* Get tag for target level
|
|
186
|
+
* By default returns second-leveled header
|
|
187
|
+
*
|
|
188
|
+
* @returns {HTMLElement}
|
|
189
|
+
*/
|
|
190
|
+
getTag(): HTMLHeadingElement;
|
|
191
|
+
/**
|
|
192
|
+
* Get current level
|
|
193
|
+
*
|
|
194
|
+
* @returns {level}
|
|
195
|
+
*/
|
|
196
|
+
get currentLevel(): Level;
|
|
197
|
+
/**
|
|
198
|
+
* Return default level
|
|
199
|
+
*
|
|
200
|
+
* @returns {level}
|
|
201
|
+
*/
|
|
202
|
+
get defaultLevel(): Level;
|
|
203
|
+
/**
|
|
204
|
+
* @typedef {object} level
|
|
205
|
+
* @property {number} number - level number
|
|
206
|
+
* @property {string} tag - tag corresponds with level number
|
|
207
|
+
* @property {string} svg - icon
|
|
208
|
+
*/
|
|
209
|
+
/**
|
|
210
|
+
* Available header levels
|
|
211
|
+
*
|
|
212
|
+
* @returns {level[]}
|
|
213
|
+
*/
|
|
214
|
+
get levels(): Level[];
|
|
215
|
+
/**
|
|
216
|
+
* Handle H1-H6 tags on paste to substitute it with header Tool
|
|
217
|
+
*
|
|
218
|
+
* @param {PasteEvent} event - event with pasted content
|
|
219
|
+
*/
|
|
220
|
+
onPaste(event: PasteEvent): void;
|
|
221
|
+
/**
|
|
222
|
+
* Used by Editor.js paste handling API.
|
|
223
|
+
* Provides configuration to handle H1-H6 tags.
|
|
224
|
+
*
|
|
225
|
+
* @returns {{handler: (function(HTMLElement): {text: string}), tags: string[]}}
|
|
226
|
+
*/
|
|
227
|
+
static get pasteConfig(): {
|
|
228
|
+
tags: string[];
|
|
229
|
+
};
|
|
230
|
+
/**
|
|
231
|
+
* Get Tool toolbox settings
|
|
232
|
+
* icon - Tool icon's SVG
|
|
233
|
+
* title - title to show in toolbox
|
|
234
|
+
*
|
|
235
|
+
* @returns {{icon: string, title: string}}
|
|
236
|
+
*/
|
|
237
|
+
static get toolbox(): {
|
|
238
|
+
icon: any;
|
|
239
|
+
title: string;
|
|
240
|
+
};
|
|
241
|
+
}
|
|
242
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@editorjs/header",
|
|
3
|
-
"version": "2.8.
|
|
3
|
+
"version": "2.8.2",
|
|
4
4
|
"keywords": [
|
|
5
5
|
"codex editor",
|
|
6
6
|
"header",
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
],
|
|
16
16
|
"main": "./dist/header.umd.js",
|
|
17
17
|
"module": "./dist/header.mjs",
|
|
18
|
+
"types": "./dist/index.d.ts",
|
|
18
19
|
"exports": {
|
|
19
20
|
".": {
|
|
20
21
|
"import": "./dist/header.mjs",
|
|
@@ -30,10 +31,13 @@
|
|
|
30
31
|
"email": "team@codex.so"
|
|
31
32
|
},
|
|
32
33
|
"devDependencies": {
|
|
34
|
+
"typescript": "^5.4.5",
|
|
33
35
|
"vite": "^4.5.0",
|
|
34
|
-
"vite-plugin-css-injected-by-js": "^3.3.0"
|
|
36
|
+
"vite-plugin-css-injected-by-js": "^3.3.0",
|
|
37
|
+
"vite-plugin-dts": "^3.9.1"
|
|
35
38
|
},
|
|
36
39
|
"dependencies": {
|
|
37
|
-
"@codexteam/icons": "^0.0.5"
|
|
40
|
+
"@codexteam/icons": "^0.0.5",
|
|
41
|
+
"@editorjs/editorjs": "^2.29.1"
|
|
38
42
|
}
|
|
39
43
|
}
|