Skip to content

Commit

Permalink
Add ts, types, ts config, update js to ts
Browse files Browse the repository at this point in the history
  • Loading branch information
yuan-93 committed Jun 3, 2024
1 parent 0591aba commit afc5007
Show file tree
Hide file tree
Showing 12 changed files with 1,912 additions and 172 deletions.
154 changes: 154 additions & 0 deletions dist/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
import { API, HTMLPasteEvent, PasteConfig, ToolConfig } from '@editorjs/editorjs';

/**
* Base Paragraph Block for the Editor.js.
* Represents a regular text block
*
* @author CodeX ([email protected])
* @copyright CodeX 2018
* @license The MIT License (MIT)
*/
/**
* @typedef {object} ParagraphConfig
* @property {string} placeholder - placeholder for the empty paragraph
* @property {boolean} preserveBlank - Whether or not to keep blank paragraphs when saving editor data
*/
interface ParagraphConfig extends ToolConfig {
/**
* Placeholder for the empty paragraph
*/
placeholder?: string;
/**
* Whether or not to keep blank paragraphs when saving editor data
*/
preserveBlank?: boolean;
}
/**
* @typedef {object} ParagraphData
* @description Tool's input and output data format
* @property {string} text — Paragraph's content. Can include HTML tags: <a><b><i>
*/
interface ParagraphData {
text: string;
}
interface ParagraphParams {
data: ParagraphData;
config: ParagraphConfig;
api: API;
readOnly: boolean;
}
export default class Paragraph {
/**
* Default placeholder for Paragraph Tool
*
* @returns {string}
* @class
*/
static get DEFAULT_PLACEHOLDER(): string;
api: API;
readOnly: boolean;
private _CSS;
private _placeholder;
private _data;
private _element;
private _preserveBlank;
/**
* 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, config, api, readOnly }: ParagraphParams);
/**
* 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(e: KeyboardEvent): void;
/**
* Create Tool's view
*
* @returns {HTMLDivElement}
* @private
*/
drawView(): HTMLDivElement;
/**
* Return Tool's view
*
* @returns {HTMLDivElement}
*/
render(): HTMLDivElement;
/**
* 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(data: ParagraphData): void;
/**
* 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(savedData: ParagraphData): boolean;
/**
* Extract Tool's data from the view
*
* @param {HTMLDivElement} toolsContent - Paragraph tools rendered view
* @returns {ParagraphData} - saved data
* @public
*/
save(toolsContent: HTMLDivElement): ParagraphData;
/**
* On paste callback fired from Editor.
*
* @param {HTMLPasteEvent} event - event with pasted data
*/
onPaste(event: HTMLPasteEvent): void;
/**
* Enable Conversion Toolbar. Paragraph can be converted to/from other tools
*/
static get conversionConfig(): {
export: string;
import: string;
};
/**
* Sanitizer rules
*/
static get sanitize(): {
text: {
br: boolean;
};
};
/**
* Returns true to notify the core that read-only mode is supported
*
* @returns {boolean}
*/
static get isReadOnlySupported(): boolean;
/**
* Used by Editor paste handling API.
* Provides configuration to handle P tags.
*
* @returns {PasteConfig}
*/
static get pasteConfig(): PasteConfig;
/**
* Icon and title for displaying at the Toolbox
*
* @returns {{icon: string, title: string}}
*/
static get toolbox(): {
icon: string;
title: string;
};
}
export {};
26 changes: 14 additions & 12 deletions dist/paragraph.mjs
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
(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>';
function o(r) {
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="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>';
function l(r) {
const t = document.createElement("div");
t.innerHTML = r.trim();
const e = document.createDocumentFragment();
Expand Down Expand Up @@ -33,8 +33,8 @@ class n {
* @param {object} params.api - editor.js api
* @param {boolean} readOnly - read only mode flag
*/
constructor({ data: t, config: e, api: i, readOnly: a }) {
this.api = i, this.readOnly = a, this._CSS = {
constructor({ data: t, config: e, api: i, readOnly: s }) {
this.api = i, this.readOnly = s, this._CSS = {
block: this.api.styles.block,
wrapper: "ce-paragraph"
}, this.readOnly || (this.onKeyUp = this.onKeyUp.bind(this)), this._placeholder = e.placeholder ? e.placeholder : n.DEFAULT_PLACEHOLDER, this._data = t ?? {}, this._element = null, this._preserveBlank = e.preserveBlank !== void 0 ? e.preserveBlank : !1;
Expand All @@ -46,20 +46,20 @@ class n {
* @param {KeyboardEvent} e - key up event
*/
onKeyUp(t) {
if (t.code !== "Backspace" && t.code !== "Delete")
if (t.code !== "Backspace" && t.code !== "Delete" || !this._element)
return;
const { textContent: e } = this._element;
e === "" && (this._element.innerHTML = "");
}
/**
* Create Tool's view
*
* @returns {HTMLElement}
* @returns {HTMLDivElement}
* @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 t.classList.add(this._CSS.wrapper, this._CSS.block), t.contentEditable = "false", t.dataset.placeholder = this.api.i18n.t(this._placeholder), this._data.text && (t.innerHTML = this._data.text), this.readOnly || (t.contentEditable = "true", t.addEventListener("keyup", this.onKeyUp)), t;
}
/**
* Return Tool's view
Expand All @@ -77,8 +77,10 @@ class n {
* @public
*/
merge(t) {
if (!this._element)
return;
this._data.text += t.text;
const e = o(t.text);
const e = l(t.text);
this._element.appendChild(e), this._element.normalize();
}
/**
Expand Down Expand Up @@ -107,14 +109,14 @@ class n {
/**
* On paste callback fired from Editor.
*
* @param {PasteEvent} event - event with pasted data
* @param {HTMLPasteEvent} event - event with pasted data
*/
onPaste(t) {
const e = {
text: t.detail.data.innerHTML
};
this._data = e, window.requestAnimationFrame(() => {
this._element.innerHTML = this._data.text || "";
this._element && (this._element.innerHTML = this._data.text || "");
});
}
/**
Expand Down Expand Up @@ -150,7 +152,7 @@ class n {
* Used by Editor paste handling API.
* Provides configuration to handle P tags.
*
* @returns {{tags: string[]}}
* @returns {PasteConfig}
*/
static get pasteConfig() {
return {
Expand All @@ -164,7 +166,7 @@ class n {
*/
static get toolbox() {
return {
icon: s,
icon: a,
title: "Text"
};
}
Expand Down
2 changes: 1 addition & 1 deletion dist/paragraph.umd.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 7 additions & 0 deletions dist/utils/makeFragment.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/**
* Create a DocumentFragment and fill it with HTML from a string
*
* @param {string} htmlString - A string of valid HTML
* @returns {DocumentFragment}
*/
export default function makeFragment(htmlString: string): DocumentFragment;
Loading

0 comments on commit afc5007

Please sign in to comment.