-
Notifications
You must be signed in to change notification settings - Fork 125
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #75 from editor-js/sync-render
chore: migrate to vite, make render sync
- Loading branch information
Showing
10 changed files
with
437 additions
and
3,525 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,4 @@ | ||
.idea/ | ||
src/ | ||
webpack.config.js | ||
vite.config.js | ||
yarn.lock |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,199 @@ | ||
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ce-paragraph{line-height:1.6em;outline:none}.ce-paragraph[data-placeholder]:empty:before{content:attr(data-placeholder);color:#707684;font-weight:400;opacity:0}.codex-editor--empty .ce-block:first-child .ce-paragraph[data-placeholder]:empty:before{opacity:1}.codex-editor--toolbox-opened .ce-block:first-child .ce-paragraph[data-placeholder]:empty:before,.codex-editor--empty .ce-block:first-child .ce-paragraph[data-placeholder]:empty:focus:before{opacity:0}.ce-paragraph p:first-of-type{margin-top:0}.ce-paragraph p:last-of-type{margin-bottom:0}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})(); | ||
const 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="M8 9V7.2C8 7.08954 8.08954 7 8.2 7L12 7M16 9V7.2C16 7.08954 15.9105 7 15.8 7L12 7M12 7L12 17M12 17H10M12 17H14"/></svg>'; | ||
/** | ||
* Base Paragraph Block for the Editor.js. | ||
* Represents a regular text block | ||
* | ||
* @author CodeX (team@codex.so) | ||
* @copyright CodeX 2018 | ||
* @license The MIT License (MIT) | ||
*/ | ||
class a { | ||
/** | ||
* Default placeholder for Paragraph Tool | ||
* | ||
* @returns {string} | ||
* @class | ||
*/ | ||
static get DEFAULT_PLACEHOLDER() { | ||
return ""; | ||
} | ||
/** | ||
* Render plugin`s main Element and fill it with saved data | ||
* | ||
* @param {object} params - constructor params | ||
* @param {ParagraphData} params.data - previously saved data | ||
* @param {ParagraphConfig} params.config - user config for Tool | ||
* @param {object} params.api - editor.js api | ||
* @param {boolean} readOnly - read only mode flag | ||
*/ | ||
constructor({ data: t, config: e, api: i, readOnly: n }) { | ||
this.api = i, this.readOnly = n, this._CSS = { | ||
block: this.api.styles.block, | ||
wrapper: "ce-paragraph" | ||
}, this.readOnly || (this.onKeyUp = this.onKeyUp.bind(this)), this._placeholder = e.placeholder ? e.placeholder : a.DEFAULT_PLACEHOLDER, this._data = {}, this._element = null, this._preserveBlank = e.preserveBlank !== void 0 ? e.preserveBlank : !1, this.data = t; | ||
} | ||
/** | ||
* Check if text content is empty and set empty string to inner html. | ||
* We need this because some browsers (e.g. Safari) insert <br> into empty contenteditanle elements | ||
* | ||
* @param {KeyboardEvent} e - key up event | ||
*/ | ||
onKeyUp(t) { | ||
if (t.code !== "Backspace" && t.code !== "Delete") | ||
return; | ||
const { textContent: e } = this._element; | ||
e === "" && (this._element.innerHTML = ""); | ||
} | ||
/** | ||
* Create Tool's view | ||
* | ||
* @returns {HTMLElement} | ||
* @private | ||
*/ | ||
drawView() { | ||
const t = document.createElement("DIV"); | ||
return t.classList.add(this._CSS.wrapper, this._CSS.block), t.contentEditable = !1, t.dataset.placeholder = this.api.i18n.t(this._placeholder), this._data.text && (t.innerHTML = this._data.text), this.readOnly || (t.contentEditable = !0, t.addEventListener("keyup", this.onKeyUp)), t; | ||
} | ||
/** | ||
* Return Tool's view | ||
* | ||
* @returns {HTMLDivElement} | ||
*/ | ||
render() { | ||
return this._element = this.drawView(), this._element; | ||
} | ||
/** | ||
* Method that specified how to merge two Text blocks. | ||
* Called by Editor.js by backspace at the beginning of the Block | ||
* | ||
* @param {ParagraphData} data | ||
* @public | ||
*/ | ||
merge(t) { | ||
const e = { | ||
text: this.data.text + t.text | ||
}; | ||
this.data = e; | ||
} | ||
/** | ||
* Validate Paragraph block data: | ||
* - check for emptiness | ||
* | ||
* @param {ParagraphData} savedData — data received after saving | ||
* @returns {boolean} false if saved data is not correct, otherwise true | ||
* @public | ||
*/ | ||
validate(t) { | ||
return !(t.text.trim() === "" && !this._preserveBlank); | ||
} | ||
/** | ||
* Extract Tool's data from the view | ||
* | ||
* @param {HTMLDivElement} toolsContent - Paragraph tools rendered view | ||
* @returns {ParagraphData} - saved data | ||
* @public | ||
*/ | ||
save(t) { | ||
return { | ||
text: t.innerHTML | ||
}; | ||
} | ||
/** | ||
* On paste callback fired from Editor. | ||
* | ||
* @param {PasteEvent} event - event with pasted data | ||
*/ | ||
onPaste(t) { | ||
const e = { | ||
text: t.detail.data.innerHTML | ||
}; | ||
this.data = e; | ||
} | ||
/** | ||
* Enable Conversion Toolbar. Paragraph can be converted to/from other tools | ||
*/ | ||
static get conversionConfig() { | ||
return { | ||
export: "text", | ||
// to convert Paragraph to other block, use 'text' property of saved data | ||
import: "text" | ||
// to covert other block's exported string to Paragraph, fill 'text' property of tool data | ||
}; | ||
} | ||
/** | ||
* Sanitizer rules | ||
*/ | ||
static get sanitize() { | ||
return { | ||
text: { | ||
br: !0 | ||
} | ||
}; | ||
} | ||
/** | ||
* Returns true to notify the core that read-only mode is supported | ||
* | ||
* @returns {boolean} | ||
*/ | ||
static get isReadOnlySupported() { | ||
return !0; | ||
} | ||
/** | ||
* Get current Tools`s data | ||
* | ||
* @returns {ParagraphData} Current data | ||
* @private | ||
*/ | ||
get data() { | ||
if (this._element !== null) { | ||
const t = this._element.innerHTML; | ||
this._data.text = t; | ||
} | ||
return this._data; | ||
} | ||
/** | ||
* Store data in plugin: | ||
* - at the this._data property | ||
* - at the HTML | ||
* | ||
* @param {ParagraphData} data — data to set | ||
* @private | ||
*/ | ||
set data(t) { | ||
this._data = t || {}, this._element !== null && this.hydrate(); | ||
} | ||
/** | ||
* Fill tool's view with data | ||
*/ | ||
hydrate() { | ||
window.requestAnimationFrame(() => { | ||
this._element.innerHTML = this._data.text || ""; | ||
}); | ||
} | ||
/** | ||
* Used by Editor paste handling API. | ||
* Provides configuration to handle P tags. | ||
* | ||
* @returns {{tags: string[]}} | ||
*/ | ||
static get pasteConfig() { | ||
return { | ||
tags: ["P"] | ||
}; | ||
} | ||
/** | ||
* Icon and title for displaying at the Toolbox | ||
* | ||
* @returns {{icon: string, title: string}} | ||
*/ | ||
static get toolbox() { | ||
return { | ||
icon: s, | ||
title: "Text" | ||
}; | ||
} | ||
} | ||
export { | ||
a as default | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ce-paragraph{line-height:1.6em;outline:none}.ce-paragraph[data-placeholder]:empty:before{content:attr(data-placeholder);color:#707684;font-weight:400;opacity:0}.codex-editor--empty .ce-block:first-child .ce-paragraph[data-placeholder]:empty:before{opacity:1}.codex-editor--toolbox-opened .ce-block:first-child .ce-paragraph[data-placeholder]:empty:before,.codex-editor--empty .ce-block:first-child .ce-paragraph[data-placeholder]:empty:focus:before{opacity:0}.ce-paragraph p:first-of-type{margin-top:0}.ce-paragraph p:last-of-type{margin-bottom:0}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})(); | ||
(function(n,i){typeof exports=="object"&&typeof module<"u"?module.exports=i():typeof define=="function"&&define.amd?define(i):(n=typeof globalThis<"u"?globalThis:n||self,n.Paragraph=i())})(this,function(){"use strict";const n="",i='<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="M8 9V7.2C8 7.08954 8.08954 7 8.2 7L12 7M16 9V7.2C16 7.08954 15.9105 7 15.8 7L12 7M12 7L12 17M12 17H10M12 17H14"/></svg>';/** | ||
* Base Paragraph Block for the Editor.js. | ||
* Represents a regular text block | ||
* | ||
* @author CodeX (team@codex.so) | ||
* @copyright CodeX 2018 | ||
* @license The MIT License (MIT) | ||
*/class s{static get DEFAULT_PLACEHOLDER(){return""}constructor({data:t,config:e,api:a,readOnly:r}){this.api=a,this.readOnly=r,this._CSS={block:this.api.styles.block,wrapper:"ce-paragraph"},this.readOnly||(this.onKeyUp=this.onKeyUp.bind(this)),this._placeholder=e.placeholder?e.placeholder:s.DEFAULT_PLACEHOLDER,this._data={},this._element=null,this._preserveBlank=e.preserveBlank!==void 0?e.preserveBlank:!1,this.data=t}onKeyUp(t){if(t.code!=="Backspace"&&t.code!=="Delete")return;const{textContent:e}=this._element;e===""&&(this._element.innerHTML="")}drawView(){const t=document.createElement("DIV");return t.classList.add(this._CSS.wrapper,this._CSS.block),t.contentEditable=!1,t.dataset.placeholder=this.api.i18n.t(this._placeholder),this._data.text&&(t.innerHTML=this._data.text),this.readOnly||(t.contentEditable=!0,t.addEventListener("keyup",this.onKeyUp)),t}render(){return this._element=this.drawView(),this._element}merge(t){const e={text:this.data.text+t.text};this.data=e}validate(t){return!(t.text.trim()===""&&!this._preserveBlank)}save(t){return{text:t.innerHTML}}onPaste(t){const e={text:t.detail.data.innerHTML};this.data=e}static get conversionConfig(){return{export:"text",import:"text"}}static get sanitize(){return{text:{br:!0}}}static get isReadOnlySupported(){return!0}get data(){if(this._element!==null){const t=this._element.innerHTML;this._data.text=t}return this._data}set data(t){this._data=t||{},this._element!==null&&this.hydrate()}hydrate(){window.requestAnimationFrame(()=>{this._element.innerHTML=this._data.text||""})}static get pasteConfig(){return{tags:["P"]}}static get toolbox(){return{icon:i,title:"Text"}}}return s}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.