@team-monolith/cds 0.28.0 → 0.29.0

package/dist/patterns/ReactEditorJS/customTools/inline/Bold.js

@@ -0,0 +1,92 @@
+import { boldSvg } from "../../../../icons";
+// https://github.com/codex-team/editor.js/blob/next/src/components/inline-tools/inline-tool-bold.ts
+// BoldInlineTool은 editorjs에서 제공하는 기본 툴입니다.
+// 이 내부 툴을 export하고 있지 않아서 코드를 옮겨와 수정하여 커스텀합니다.
+var Bold = /** @class */ (function () {
+    function Bold() {
+        /**
+         * Native Document's command that uses for Bold
+         */
+        this.commandName = "bold";
+        /**
+         * Styles
+         */
+        this.CSS = {
+            button: "ce-inline-tool",
+            buttonActive: "ce-inline-tool--active",
+            buttonModifier: "ce-inline-tool--bold",
+        };
+        /**
+         * Elements
+         */
+        this.nodes = {
+            button: undefined,
+        };
+    }
+    Object.defineProperty(Bold, "sanitize", {
+        /**
+         * Sanitizer Rule
+         * Leave <b> tags
+         *
+         * @returns {object}
+         */
+        get: function () {
+            return {
+                b: {},
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Create button for Inline Toolbar
+     */
+    Bold.prototype.render = function () {
+        this.nodes.button = document.createElement("button");
+        this.nodes.button.type = "button";
+        this.nodes.button.classList.add(this.CSS.button, this.CSS.buttonModifier);
+        this.nodes.button.innerHTML = "<img src=\"".concat(boldSvg, "\" />");
+        return this.nodes.button;
+    };
+    /**
+     * Wrap range with <b> tag
+     */
+    Bold.prototype.surround = function () {
+        document.execCommand(this.commandName);
+    };
+    /**
+     * Check selection and set activated state to button if there are <b> tag
+     *
+     * @returns {boolean}
+     */
+    Bold.prototype.checkState = function () {
+        var _a;
+        var isActive = document.queryCommandState(this.commandName);
+        (_a = this.nodes.button) === null || _a === void 0 ? void 0 : _a.classList.toggle(this.CSS.buttonActive, isActive);
+        return isActive;
+    };
+    Object.defineProperty(Bold.prototype, "shortcut", {
+        /**
+         * Set a shortcut
+         *
+         * @returns {boolean}
+         */
+        get: function () {
+            return "CMD+B";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Specifies Tool as Inline Toolbar Tool
+     *
+     * @returns {boolean}
+     */
+    Bold.isInline = true;
+    /**
+     * Title for hover-tooltip
+     */
+    Bold.title = "Bold";
+    return Bold;
+}());
+export { Bold };

package/dist/patterns/ReactEditorJS/customTools/inline/InlineCode.d.ts

@@ -0,0 +1,4 @@
+import EditorJSInlineCode from "@editorjs/inline-code";
+export declare class InlineCode extends EditorJSInlineCode {
+    get toolboxIcon(): string;
+}

package/dist/patterns/ReactEditorJS/customTools/inline/InlineCode.js

@@ -0,0 +1,32 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import EditorJSInlineCode from "@editorjs/inline-code";
+import { codeFillSvg } from "../../../../icons";
+var InlineCode = /** @class */ (function (_super) {
+    __extends(InlineCode, _super);
+    function InlineCode() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(InlineCode.prototype, "toolboxIcon", {
+        get: function () {
+            return "<img src=\"".concat(codeFillSvg, "\" />");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return InlineCode;
+}(EditorJSInlineCode));
+export { InlineCode };

package/dist/patterns/ReactEditorJS/customTools/inline/Italic.d.ts

@@ -0,0 +1,48 @@
+import { InlineTool, SanitizerConfig } from "@editorjs/editorjs";
+export declare class Italic implements InlineTool {
+    /**
+     * Specifies Tool as Inline Toolbar Tool
+     *
+     * @returns {boolean}
+     */
+    static isInline: boolean;
+    /**
+     * Title for hover-tooltip
+     */
+    static title: string;
+    /**
+     * Sanitizer Rule
+     * Leave <i> tags
+     *
+     * @returns {object}
+     */
+    static get sanitize(): SanitizerConfig;
+    /**
+     * Native Document's command that uses for Italic
+     */
+    private readonly commandName;
+    /**
+     * Styles
+     */
+    private readonly CSS;
+    /**
+     * Elements
+     */
+    private nodes;
+    /**
+     * Create button for Inline Toolbar
+     */
+    render(): HTMLElement;
+    /**
+     * Wrap range with <i> tag
+     */
+    surround(): void;
+    /**
+     * Check selection and set activated state to button if there are <i> tag
+     */
+    checkState(): boolean;
+    /**
+     * Set a shortcut
+     */
+    get shortcut(): string;
+}

package/dist/patterns/ReactEditorJS/customTools/inline/Italic.js

@@ -0,0 +1,88 @@
+import { italicSvg } from "../../../../icons";
+// https://github.com/codex-team/editor.js/blob/next/src/components/inline-tools/inline-tool-italic.ts
+// ItalicInlineTool은 editorjs에서 제공하는 기본 툴입니다.
+// 이 내부 툴을 export하고 있지 않아서 코드를 옮겨와 수정하여 커스텀합니다.
+var Italic = /** @class */ (function () {
+    function Italic() {
+        /**
+         * Native Document's command that uses for Italic
+         */
+        this.commandName = "italic";
+        /**
+         * Styles
+         */
+        this.CSS = {
+            button: "ce-inline-tool",
+            buttonActive: "ce-inline-tool--active",
+            buttonModifier: "ce-inline-tool--italic",
+        };
+        /**
+         * Elements
+         */
+        this.nodes = {
+            button: null,
+        };
+    }
+    Object.defineProperty(Italic, "sanitize", {
+        /**
+         * Sanitizer Rule
+         * Leave <i> tags
+         *
+         * @returns {object}
+         */
+        get: function () {
+            return {
+                i: {},
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Create button for Inline Toolbar
+     */
+    Italic.prototype.render = function () {
+        this.nodes.button = document.createElement("button");
+        this.nodes.button.type = "button";
+        this.nodes.button.classList.add(this.CSS.button, this.CSS.buttonModifier);
+        this.nodes.button.innerHTML = "<img src=\"".concat(italicSvg, "\" />");
+        return this.nodes.button;
+    };
+    /**
+     * Wrap range with <i> tag
+     */
+    Italic.prototype.surround = function () {
+        document.execCommand(this.commandName);
+    };
+    /**
+     * Check selection and set activated state to button if there are <i> tag
+     */
+    Italic.prototype.checkState = function () {
+        var _a;
+        var isActive = document.queryCommandState(this.commandName);
+        (_a = this.nodes.button) === null || _a === void 0 ? void 0 : _a.classList.toggle(this.CSS.buttonActive, isActive);
+        return isActive;
+    };
+    Object.defineProperty(Italic.prototype, "shortcut", {
+        /**
+         * Set a shortcut
+         */
+        get: function () {
+            return "CMD+I";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Specifies Tool as Inline Toolbar Tool
+     *
+     * @returns {boolean}
+     */
+    Italic.isInline = true;
+    /**
+     * Title for hover-tooltip
+     */
+    Italic.title = "Italic";
+    return Italic;
+}());
+export { Italic };

package/dist/patterns/ReactEditorJS/customTools/inline/StrikeThrough.d.ts

@@ -0,0 +1,4 @@
+import EditorStrikeThrough from "editorjs-strikethrough";
+export declare class StrikeThrough extends EditorStrikeThrough {
+    get toolboxIcon(): string;
+}

package/dist/patterns/ReactEditorJS/customTools/inline/StrikeThrough.js

@@ -0,0 +1,32 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import EditorStrikeThrough from "editorjs-strikethrough";
+import { strikethroughSvg } from "../../../../icons";
+var StrikeThrough = /** @class */ (function (_super) {
+    __extends(StrikeThrough, _super);
+    function StrikeThrough() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(StrikeThrough.prototype, "toolboxIcon", {
+        get: function () {
+            return "<img src=\"".concat(strikethroughSvg, "\" />");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return StrikeThrough;
+}(EditorStrikeThrough));
+export { StrikeThrough };

package/dist/patterns/ReactEditorJS/customTools/inline/Underline.d.ts

@@ -0,0 +1,4 @@
+import EditorJSUnderline from "@editorjs/underline";
+export declare class Underline extends EditorJSUnderline {
+    get toolboxIcon(): string;
+}

package/dist/patterns/ReactEditorJS/customTools/inline/Underline.js

@@ -0,0 +1,32 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import EditorJSUnderline from "@editorjs/underline";
+import { underlineSvg } from "../../../../icons";
+var Underline = /** @class */ (function (_super) {
+    __extends(Underline, _super);
+    function Underline() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(Underline.prototype, "toolboxIcon", {
+        get: function () {
+            return "<img src=\"".concat(underlineSvg, "\" />");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return Underline;
+}(EditorJSUnderline));
+export { Underline };

package/dist/patterns/ReactEditorJS/customTools/tunes/Delete.d.ts

@@ -0,0 +1,30 @@
+import { BlockTune, API } from "@editorjs/editorjs";
+import { TunesMenuConfig } from "@editorjs/editorjs/types/tools";
+export declare class Delete implements BlockTune {
+    /**
+     * Set Tool is Tune
+     */
+    static readonly isTune = true;
+    /**
+     * Property that contains Editor.js API methods
+     *
+     * @see {@link docs/api.md}
+     */
+    private readonly api;
+    /**
+     * DeleteTune constructor
+     *
+     * @param {API} api - Editor's API
+     */
+    constructor({ api }: {
+        api: API;
+    });
+    /**
+     * Tune's appearance in block settings menu
+     */
+    render(): TunesMenuConfig;
+    /**
+     * Delete block conditions passed
+     */
+    handleClick(): void;
+}

package/dist/patterns/ReactEditorJS/customTools/tunes/Delete.js

@@ -0,0 +1,40 @@
+import { closeFillSvg } from "../../../../icons";
+// https://github.com/codex-team/editor.js/blob/next/src/components/block-tunes/block-tune-delete.ts
+var Delete = /** @class */ (function () {
+    /**
+     * DeleteTune constructor
+     *
+     * @param {API} api - Editor's API
+     */
+    function Delete(_a) {
+        var api = _a.api;
+        this.api = api;
+    }
+    /**
+     * Tune's appearance in block settings menu
+     */
+    Delete.prototype.render = function () {
+        var _this = this;
+        return {
+            icon: "<img src=\"".concat(closeFillSvg, "\" />"),
+            title: this.api.i18n.t("Delete"),
+            name: "delete",
+            confirmation: {
+                title: this.api.i18n.t("Click to delete"),
+                onActivate: function () { return _this.handleClick(); },
+            },
+        };
+    };
+    /**
+     * Delete block conditions passed
+     */
+    Delete.prototype.handleClick = function () {
+        this.api.blocks.delete();
+    };
+    /**
+     * Set Tool is Tune
+     */
+    Delete.isTune = true;
+    return Delete;
+}());
+export { Delete };

package/dist/patterns/ReactEditorJS/customTools/tunes/MoveDown.d.ts

@@ -0,0 +1,34 @@
+import { BlockTune, API } from "@editorjs/editorjs";
+import { TunesMenuConfig } from "@editorjs/editorjs/types/tools";
+export declare class MoveDown implements BlockTune {
+    /**
+     * Set Tool is Tune
+     */
+    static readonly isTune = true;
+    /**
+     * Property that contains Editor.js API methods
+     *
+     * @see {@link docs/api.md}
+     */
+    private readonly api;
+    /**
+     * Styles
+     */
+    private CSS;
+    /**
+     * MoveDownTune constructor
+     *
+     * @param {API} api — Editor's API
+     */
+    constructor({ api }: {
+        api: API;
+    });
+    /**
+     * Tune's appearance in block settings menu
+     */
+    render(): TunesMenuConfig;
+    /**
+     * Handle clicks on 'move down' button
+     */
+    handleClick(): void;
+}

package/dist/patterns/ReactEditorJS/customTools/tunes/MoveDown.js

@@ -0,0 +1,62 @@
+import { arrowDownLineSvg } from "../../../../icons";
+// https://github.com/codex-team/editor.js/blob/next/src/components/block-tunes/block-tune-move-down.ts
+var MoveDown = /** @class */ (function () {
+    /**
+     * MoveDownTune constructor
+     *
+     * @param {API} api — Editor's API
+     */
+    function MoveDown(_a) {
+        var api = _a.api;
+        /**
+         * Styles
+         */
+        this.CSS = {
+            animation: "wobble",
+        };
+        this.api = api;
+    }
+    /**
+     * Tune's appearance in block settings menu
+     */
+    MoveDown.prototype.render = function () {
+        var _this = this;
+        return {
+            icon: "<img src=\"".concat(arrowDownLineSvg, "\" />"),
+            title: this.api.i18n.t("Move down"),
+            onActivate: function () { return _this.handleClick(); },
+            name: "move-down",
+        };
+    };
+    /**
+     * Handle clicks on 'move down' button
+     */
+    MoveDown.prototype.handleClick = function () {
+        var currentBlockIndex = this.api.blocks.getCurrentBlockIndex();
+        var nextBlock = this.api.blocks.getBlockByIndex(currentBlockIndex + 1);
+        // If Block is last do nothing
+        if (!nextBlock) {
+            throw new Error("Unable to move Block down since it is already the last");
+        }
+        var nextBlockElement = nextBlock.holder;
+        var nextBlockCoords = nextBlockElement.getBoundingClientRect();
+        var scrollOffset = Math.abs(window.innerHeight - nextBlockElement.offsetHeight);
+        /**
+         * Next block ends on screen.
+         * Increment scroll by next block's height to save element onscreen-position
+         */
+        if (nextBlockCoords.top < window.innerHeight) {
+            scrollOffset = window.scrollY + nextBlockElement.offsetHeight;
+        }
+        window.scrollTo(0, scrollOffset);
+        /** Change blocks positions */
+        this.api.blocks.move(currentBlockIndex + 1);
+        this.api.toolbar.toggleBlockSettings(true);
+    };
+    /**
+     * Set Tool is Tune
+     */
+    MoveDown.isTune = true;
+    return MoveDown;
+}());
+export { MoveDown };

package/dist/patterns/ReactEditorJS/customTools/tunes/MoveUp.d.ts

@@ -0,0 +1,34 @@
+import { BlockTune, API } from "@editorjs/editorjs";
+import { TunesMenuConfig } from "@editorjs/editorjs/types/tools";
+export declare class MoveUp implements BlockTune {
+    /**
+     * Set Tool is Tune
+     */
+    static readonly isTune = true;
+    /**
+     * Property that contains Editor.js API methods
+     *
+     * @see {@link docs/api.md}
+     */
+    private readonly api;
+    /**
+     * Styles
+     */
+    private CSS;
+    /**
+     * MoveUpTune constructor
+     *
+     * @param {API} api - Editor's API
+     */
+    constructor({ api }: {
+        api: API;
+    });
+    /**
+     * Tune's appearance in block settings menu
+     */
+    render(): TunesMenuConfig;
+    /**
+     * Move current block up
+     */
+    handleClick(): void;
+}

package/dist/patterns/ReactEditorJS/customTools/tunes/MoveUp.js

@@ -0,0 +1,72 @@
+import { arrowUpLineSvg } from "../../../../icons";
+// https://github.com/codex-team/editor.js/blob/next/src/components/block-tunes/block-tune-move-up.ts
+var MoveUp = /** @class */ (function () {
+    /**
+     * MoveUpTune constructor
+     *
+     * @param {API} api - Editor's API
+     */
+    function MoveUp(_a) {
+        var api = _a.api;
+        /**
+         * Styles
+         */
+        this.CSS = {
+            animation: "wobble",
+        };
+        this.api = api;
+    }
+    /**
+     * Tune's appearance in block settings menu
+     */
+    MoveUp.prototype.render = function () {
+        var _this = this;
+        return {
+            icon: "<img src=\"".concat(arrowUpLineSvg, "\" />"),
+            title: this.api.i18n.t("Move up"),
+            onActivate: function () { return _this.handleClick(); },
+            name: "move-up",
+        };
+    };
+    /**
+     * Move current block up
+     */
+    MoveUp.prototype.handleClick = function () {
+        var currentBlockIndex = this.api.blocks.getCurrentBlockIndex();
+        var currentBlock = this.api.blocks.getBlockByIndex(currentBlockIndex);
+        var previousBlock = this.api.blocks.getBlockByIndex(currentBlockIndex - 1);
+        if (currentBlockIndex === 0 || !currentBlock || !previousBlock) {
+            throw new Error("Unable to move Block up since it is already the first");
+        }
+        var currentBlockElement = currentBlock.holder;
+        var previousBlockElement = previousBlock.holder;
+        /**
+         * Here is two cases:
+         *  - when previous block has negative offset and part of it is visible on window, then we scroll
+         *  by window's height and add offset which is mathematically difference between two blocks
+         *
+         *  - when previous block is visible and has offset from the window,
+         *      than we scroll window to the difference between this offsets.
+         */
+        var currentBlockCoords = currentBlockElement.getBoundingClientRect(), previousBlockCoords = previousBlockElement.getBoundingClientRect();
+        var scrollUpOffset;
+        if (previousBlockCoords.top > 0) {
+            scrollUpOffset =
+                Math.abs(currentBlockCoords.top) - Math.abs(previousBlockCoords.top);
+        }
+        else {
+            scrollUpOffset =
+                Math.abs(currentBlockCoords.top) + previousBlockCoords.height;
+        }
+        window.scrollBy(0, -1 * scrollUpOffset);
+        /** Change blocks positions */
+        this.api.blocks.move(currentBlockIndex - 1);
+        this.api.toolbar.toggleBlockSettings(true);
+    };
+    /**
+     * Set Tool is Tune
+     */
+    MoveUp.isTune = true;
+    return MoveUp;
+}());
+export { MoveUp };