@team-monolith/cds 1.10.6 → 1.11.1

package/dist/patterns/ReactEditorJS/customTools/block/Quote.js

@@ -1,171 +0,0 @@
-import { doubleQuotesLSvg, inputMethodLineSvg } from "../../../../icons";
-import { css } from "@emotion/react";
-import { hexToCSSFilter } from "hex-to-css-filter";
-export const QuoteStyle = (theme) => css `
-  .ce-quote {
-    outline: none;
-    margin-bottom: 8px;
-    padding-left: 12px;
-    border-left: 4px solid ${theme.color.container.marbleContainer};
-    color: ${theme.color.container.marbleOnContainer};
-    /* Default/Paragraph/14px-Rg */
-    font-family: ${theme.fontFamily.ui};
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px; /* 142.857% */
-    &.red {
-      border-left: 4px solid ${theme.color.container.dangerContainer};
-      color: ${theme.color.container.dangerOnContainer};
-    }
-    &.yellow {
-      border-left: 4px solid ${theme.color.container.warningContainer};
-      color: ${theme.color.container.warningOnContainer};
-    }
-    &.blue {
-      border-left: 4px solid ${theme.color.container.primaryContainer};
-      color: ${theme.color.container.primaryOnContainer};
-    }
-    &.green {
-      border-left: 4px solid ${theme.color.container.successContainer};
-      color: ${theme.color.container.successOnContainer};
-    }
-  }
-  // img태그에서는 color를 사용할 수 없으므로 filter를 사용합니다.
-  .ce-popover-item[data-item-name="grey"] .ce-popover-item__icon {
-    background: ${theme.color.container.marbleContainer};
-    img {
-      filter: ${hexToCSSFilter(theme.color.container.marbleOnContainer).filter};
-    }
-  }
-  .ce-popover-item[data-item-name="red"] .ce-popover-item__icon {
-    background: ${theme.color.container.dangerContainer};
-    img {
-      filter: ${hexToCSSFilter(theme.color.container.dangerOnContainer).filter};
-    }
-  }
-  .ce-popover-item[data-item-name="yellow"] .ce-popover-item__icon {
-    background: ${theme.color.container.warningContainer};
-    img {
-      filter: ${hexToCSSFilter(theme.color.container.warningOnContainer)
-    .filter};
-    }
-  }
-  .ce-popover-item[data-item-name="blue"] .ce-popover-item__icon {
-    background: ${theme.color.container.primaryContainer};
-    img {
-      filter: ${hexToCSSFilter(theme.color.container.primaryOnContainer)
-    .filter};
-    }
-  }
-  .ce-popover-item[data-item-name="green"] .ce-popover-item__icon {
-    background: ${theme.color.container.successContainer};
-    img {
-      filter: ${hexToCSSFilter(theme.color.container.successOnContainer)
-    .filter};
-    }
-  }
-`;
-export class Quote {
-    constructor({ api, config, readOnly, data }) {
-        this.api = api;
-        this.config = config;
-        this.readOnly = readOnly;
-        this._wrapper = this.createWrapper(data);
-    }
-    /** 주어진 data에 따라 HTML Element를 반환함. */
-    createWrapper(data) {
-        const wrapper = document.createElement("div");
-        wrapper.classList.add("ce-quote", data.color || this.defaultColor);
-        wrapper.contentEditable = this.readOnly ? "false" : "true";
-        wrapper.innerHTML = data.text || "";
-        return wrapper;
-    }
-    /** 주어진 data에 따라 this._wrapper를 업데이트함. */
-    updateWrapper(data) {
-        var _a;
-        const newWrapper = this.createWrapper(data);
-        (_a = this._wrapper.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newWrapper, this._wrapper);
-        this._wrapper = newWrapper;
-    }
-    get colors() {
-        return ["grey", "red", "yellow", "blue", "green"];
-    }
-    get defaultColor() {
-        return this.colors[0];
-    }
-    get color() {
-        return this._wrapper.classList[1];
-    }
-    save() {
-        var _a;
-        return {
-            color: this.color,
-            text: (_a = this._wrapper.innerHTML) !== null && _a !== void 0 ? _a : "",
-        };
-    }
-    render() {
-        return this._wrapper;
-    }
-    // block tune 설정
-    renderSettings() {
-        const tunes = [
-            {
-                name: "grey",
-                label: this.api.i18n.t("Grey"),
-            },
-            {
-                name: "red",
-                label: this.api.i18n.t("Red"),
-            },
-            {
-                name: "yellow",
-                label: this.api.i18n.t("Yellow"),
-            },
-            {
-                name: "blue",
-                label: this.api.i18n.t("Blue"),
-            },
-            {
-                name: "green",
-                label: this.api.i18n.t("Green"),
-            },
-        ];
-        return tunes.map((tune) => ({
-            name: tune.name,
-            icon: `<img src="${inputMethodLineSvg}" />`,
-            label: tune.label,
-            isActive: this.color === tune.name,
-            closeOnActivate: true,
-            onActivate: () => {
-                var _a;
-                this.updateWrapper({
-                    color: tune.name,
-                    text: (_a = this._wrapper.innerHTML) !== null && _a !== void 0 ? _a : "",
-                });
-            },
-        }));
-    }
-    static get isReadOnlySupported() {
-        return true;
-    }
-    static get enableLineBreaks() {
-        return true;
-    }
-    static get toolbox() {
-        return {
-            icon: `<img src="${doubleQuotesLSvg}" />`,
-            title: "Quote",
-        };
-    }
-    // TODO: 현재 onPaste 작동하지 않습니다.
-    onPaste(event) {
-        const content = event.detail.data;
-        this._wrapper.innerHTML = content.textContent;
-    }
-    static get pasteConfig() {
-        return {
-            tags: ["BLOCKQUOTE"],
-        };
-    }
-}

package/dist/patterns/ReactEditorJS/customTools/block/Raw.d.ts

@@ -1,30 +0,0 @@
-import EditorJSRaw from "@editorjs/raw";
-import { Theme } from "@emotion/react";
-type COLOR_TYPE = "code-light-theme" | "code-dark-theme";
-export declare const RawStyle: (theme: Theme) => import("@emotion/utils").SerializedStyles;
-export declare class Raw extends EditorJSRaw {
-    private _color;
-    constructor({ data, config, api, readOnly }: any);
-    set color(color: COLOR_TYPE);
-    get colors(): string[];
-    get defaultColor(): string;
-    render(): HTMLElement;
-    save(rawToolsWrapper: HTMLDivElement): any;
-    renderSettings(): {
-        name: string;
-        icon: string;
-        label: any;
-        isActive: boolean;
-        closeOnActivate: boolean;
-        onActivate: () => void;
-    }[];
-    static get toolbox(): {
-        icon: string;
-        title: string;
-    };
-    onPaste(event: any): void;
-    static get pasteConfig(): {
-        tags: string[];
-    };
-}
-export {};

package/dist/patterns/ReactEditorJS/customTools/block/Raw.js

@@ -1,107 +0,0 @@
-import EditorJSRaw from "@editorjs/raw";
-import { css } from "@emotion/react";
-import { codeViewSvg, lightbulbFillSvg, lightbulbLineSvg, } from "../../../../icons";
-import { hexToCSSFilter } from "hex-to-css-filter";
-export const RawStyle = (theme) => css `
-  .ce-rawtool__textarea {
-    border-radius: 6px;
-    padding: 4px 8px;
-    color: ${theme.color.foreground.neutralBase};
-    background-color: ${theme.color.background.neutralAlt};
-    /* Mono/Paragraph/14px-Rg */
-    font-family: D2Coding;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px; /* 142.857% */
-    &.code-dark-theme {
-      color: ${theme.color.container.obsidianOnContainer};
-      background-color: ${theme.color.container.obsidianContainer};
-    }
-  }
-  // img태그에서는 color를 사용할 수 없으므로 filter를 사용합니다.
-  .ce-popover-item[data-item-name="code-light-theme"] .ce-popover-item__icon {
-    background: ${theme.color.container.marbleContainer};
-    img {
-      filter: ${hexToCSSFilter(theme.color.container.marbleOnContainer).filter};
-    }
-  }
-  .ce-popover-item[data-item-name="code-dark-theme"] .ce-popover-item__icon {
-    background: ${theme.color.container.obsidianContainer};
-    img {
-      filter: ${hexToCSSFilter(theme.color.container.obsidianOnContainer)
-    .filter};
-    }
-  }
-`;
-// https://github.com/editor-js/raw/blob/master/src/index.js
-export class Raw extends EditorJSRaw {
-    constructor({ data, config, api, readOnly }) {
-        super({ data, config, api, readOnly });
-        this._color = data.color || this.defaultColor;
-    }
-    set color(color) {
-        var _a, _b;
-        this._color = color;
-        (_a = this.textarea) === null || _a === void 0 ? void 0 : _a.classList.remove(...this.colors);
-        (_b = this.textarea) === null || _b === void 0 ? void 0 : _b.classList.add(color);
-    }
-    get colors() {
-        return ["code-light-theme", "code-dark-theme"];
-    }
-    get defaultColor() {
-        return this.colors[0];
-    }
-    render() {
-        var _a;
-        const wrapper = super.render();
-        (_a = this.textarea) === null || _a === void 0 ? void 0 : _a.classList.add(this._color);
-        return wrapper;
-    }
-    save(rawToolsWrapper) {
-        return Object.assign(Object.assign({}, super.save(rawToolsWrapper)), { color: this._color });
-    }
-    // block tune 설정
-    renderSettings() {
-        const tunes = [
-            {
-                name: "code-light-theme",
-                label: this.api.i18n.t("Light Theme"),
-                icon: `<img src="${lightbulbLineSvg}" />`,
-            },
-            {
-                name: "code-dark-theme",
-                label: this.api.i18n.t("Dark Theme"),
-                icon: `<img src="${lightbulbFillSvg}" />`,
-            },
-        ];
-        return tunes.map((tune) => ({
-            name: tune.name,
-            icon: tune.icon,
-            label: tune.label,
-            isActive: this._color === tune.name,
-            closeOnActivate: true,
-            onActivate: () => {
-                this.color = tune.name;
-            },
-        }));
-    }
-    static get toolbox() {
-        return {
-            icon: `<img src="${codeViewSvg}" />`,
-            title: "Code",
-        };
-    }
-    onPaste(event) {
-        var _a;
-        const content = event.detail.data;
-        if (this.textarea) {
-            this.textarea.textContent = (_a = content.textContent) !== null && _a !== void 0 ? _a : "";
-        }
-    }
-    static get pasteConfig() {
-        return {
-            tags: ["PRE", "CODE", "TEXTAREA"],
-        };
-    }
-}

package/dist/patterns/ReactEditorJS/customTools/block/Table.d.ts

@@ -1,9 +0,0 @@
-import EditorJSTable from "@editorjs/table";
-export declare class Table extends EditorJSTable {
-    static get toolbox(): {
-        icon: string;
-        title: string;
-    };
-    getConfig(configName: string, defaultValue: any, savedData: any): any;
-    renderSettings(): any[];
-}

package/dist/patterns/ReactEditorJS/customTools/block/Table.js

@@ -1,28 +0,0 @@
-import EditorJSTable from "@editorjs/table";
-import { table2Svg, layoutTopLineSvg, layoutGridLineSvg, } from "../../../../icons";
-const TUNE_ICONS = [
-    `<img src="${layoutTopLineSvg}" />`,
-    `<img src="${layoutGridLineSvg}" />`,
-];
-// https://github.com/editor-js/table/blob/master/src/plugin.js
-export class Table extends EditorJSTable {
-    static get toolbox() {
-        return {
-            icon: `<img src="${table2Svg}" />`,
-            title: "Table",
-        };
-    }
-    // https://github.com/editor-js/table/pull/134
-    // 기존 내부의 getConfig에 오류가 있고, 이를 수정하기 위해 override합니다.
-    getConfig(configName, defaultValue = false, savedData) {
-        if (savedData && configName in savedData) {
-            return savedData[configName];
-        }
-        return this.config && this.config[configName]
-            ? this.config[configName]
-            : defaultValue;
-    }
-    renderSettings() {
-        return Array.from(super.renderSettings()).map((setting, i) => (Object.assign(Object.assign({}, setting), { icon: TUNE_ICONS[i] })));
-    }
-}

package/dist/patterns/ReactEditorJS/customTools/index.d.ts

@@ -1,16 +0,0 @@
-export * from "./block/Header";
-export * from "./block/NestedList";
-export * from "./block/Quote";
-export * from "./block/Callout";
-export * from "./block/Raw";
-export * from "./block/Delimiter";
-export * from "./block/Table";
-export * from "./block/Image";
-export * from "./inline/Bold";
-export * from "./inline/InlineCode";
-export * from "./inline/Italic";
-export * from "./inline/StrikeThrough";
-export * from "./inline/Underline";
-export * from "./tunes/MoveUp";
-export * from "./tunes/Delete";
-export * from "./tunes/MoveDown";

package/dist/patterns/ReactEditorJS/customTools/index.js

@@ -1,16 +0,0 @@
-export * from "./block/Header";
-export * from "./block/NestedList";
-export * from "./block/Quote";
-export * from "./block/Callout";
-export * from "./block/Raw";
-export * from "./block/Delimiter";
-export * from "./block/Table";
-export * from "./block/Image";
-export * from "./inline/Bold";
-export * from "./inline/InlineCode";
-export * from "./inline/Italic";
-export * from "./inline/StrikeThrough";
-export * from "./inline/Underline";
-export * from "./tunes/MoveUp";
-export * from "./tunes/Delete";
-export * from "./tunes/MoveDown";

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

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

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

@@ -1,83 +0,0 @@
-import { boldSvg } from "../../../../icons";
-// https://github.com/codex-team/editor.js/blob/next/src/components/inline-tools/inline-tool-bold.ts
-// BoldInlineTool은 editorjs에서 제공하는 기본 툴입니다.
-// 이 내부 툴을 export하고 있지 않아서 코드를 옮겨와 수정하여 커스텀합니다.
-export class Bold {
-    constructor() {
-        /**
-         * 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,
-        };
-    }
-    /**
-     * Sanitizer Rule
-     * Leave <b>, <strong> tags
-     *
-     * @returns {object}
-     */
-    static get sanitize() {
-        return {
-            b: {},
-            strong: {},
-        };
-    }
-    /**
-     * Create button for Inline Toolbar
-     */
-    render() {
-        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="${boldSvg}" />`;
-        return this.nodes.button;
-    }
-    /**
-     * Wrap range with <b> tag
-     */
-    surround() {
-        document.execCommand(this.commandName);
-    }
-    /**
-     * Check selection and set activated state to button if there are <b> tag
-     *
-     * @returns {boolean}
-     */
-    checkState() {
-        var _a;
-        const isActive = document.queryCommandState(this.commandName);
-        (_a = this.nodes.button) === null || _a === void 0 ? void 0 : _a.classList.toggle(this.CSS.buttonActive, isActive);
-        return isActive;
-    }
-    /**
-     * Set a shortcut
-     *
-     * @returns {boolean}
-     */
-    get shortcut() {
-        return "CMD+B";
-    }
-}
-/**
- * Specifies Tool as Inline Toolbar Tool
- *
- * @returns {boolean}
- */
-Bold.isInline = true;
-/**
- * Title for hover-tooltip
- */
-Bold.title = "Bold";

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

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

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

@@ -1,7 +0,0 @@
-import EditorJSInlineCode from "@editorjs/inline-code";
-import { codeFillSvg } from "../../../../icons";
-export class InlineCode extends EditorJSInlineCode {
-    get toolboxIcon() {
-        return `<img src="${codeFillSvg}" />`;
-    }
-}

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

@@ -1,48 +0,0 @@
-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>, <em> 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

@@ -1,79 +0,0 @@
-import { italicSvg } from "../../../../icons";
-// https://github.com/codex-team/editor.js/blob/next/src/components/inline-tools/inline-tool-italic.ts
-// ItalicInlineTool은 editorjs에서 제공하는 기본 툴입니다.
-// 이 내부 툴을 export하고 있지 않아서 코드를 옮겨와 수정하여 커스텀합니다.
-export class Italic {
-    constructor() {
-        /**
-         * 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,
-        };
-    }
-    /**
-     * Sanitizer Rule
-     * Leave <i>, <em> tags
-     *
-     * @returns {object}
-     */
-    static get sanitize() {
-        return {
-            i: {},
-            em: {},
-        };
-    }
-    /**
-     * Create button for Inline Toolbar
-     */
-    render() {
-        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="${italicSvg}" />`;
-        return this.nodes.button;
-    }
-    /**
-     * Wrap range with <i> tag
-     */
-    surround() {
-        document.execCommand(this.commandName);
-    }
-    /**
-     * Check selection and set activated state to button if there are <i> tag
-     */
-    checkState() {
-        var _a;
-        const isActive = document.queryCommandState(this.commandName);
-        (_a = this.nodes.button) === null || _a === void 0 ? void 0 : _a.classList.toggle(this.CSS.buttonActive, isActive);
-        return isActive;
-    }
-    /**
-     * Set a shortcut
-     */
-    get shortcut() {
-        return "CMD+I";
-    }
-}
-/**
- * Specifies Tool as Inline Toolbar Tool
- *
- * @returns {boolean}
- */
-Italic.isInline = true;
-/**
- * Title for hover-tooltip
- */
-Italic.title = "Italic";

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

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

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

@@ -1,7 +0,0 @@
-import EditorStrikeThrough from "editorjs-strikethrough";
-import { strikethroughSvg } from "../../../../icons";
-export class StrikeThrough extends EditorStrikeThrough {
-    get toolboxIcon() {
-        return `<img src="${strikethroughSvg}" />`;
-    }
-}

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

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