@team-monolith/cds 1.10.5 → 1.11.0

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

@@ -1,162 +0,0 @@
-import { css } from "@emotion/react";
-import { hexToCSSFilter } from "hex-to-css-filter";
-import { feedbackLineSvg, inputMethodLineSvg } from "../../../../icons";
-export const CalloutStyle = (theme) => css `
-  .ce-callout {
-    outline: none;
-    margin-bottom: 8px;
-    padding: 4px 8px;
-    border-radius: 6px;
-    background-color: ${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 {
-      background-color: ${theme.color.container.dangerContainer};
-      color: ${theme.color.container.dangerOnContainer};
-    }
-    &.yellow {
-      background-color: ${theme.color.container.warningContainer};
-      color: ${theme.color.container.warningOnContainer};
-    }
-    &.blue {
-      background-color: ${theme.color.container.primaryContainer};
-      color: ${theme.color.container.primaryOnContainer};
-    }
-    &.green {
-      background-color: ${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 Callout {
-    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-callout", 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="${feedbackLineSvg}" />`,
-            title: "Callout",
-        };
-    }
-}

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

@@ -1,10 +0,0 @@
-import EditorJSDelimiter from "@editorjs/delimiter";
-import { Theme } from "@emotion/react";
-export declare const DelimiterStyle: (theme: Theme) => import("@emotion/utils").SerializedStyles;
-export declare class Delimiter extends EditorJSDelimiter {
-    static get toolbox(): {
-        icon: string;
-        title: string;
-    };
-    drawView(): HTMLDivElement;
-}

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

@@ -1,26 +0,0 @@
-import EditorJSDelimiter from "@editorjs/delimiter";
-import { css } from "@emotion/react";
-import { separatorSvg } from "../../../../icons";
-export const DelimiterStyle = (theme) => css `
-  .ce-block__content {
-    hr {
-      border-top: 1px solid ${theme.color.foreground.neutralBaseDisabled};
-    }
-  }
-`;
-// https://github.com/editor-js/delimiter/blob/master/src/index.js
-export class Delimiter extends EditorJSDelimiter {
-    static get toolbox() {
-        return {
-            icon: `<img src="${separatorSvg}" />`,
-            title: "Delimiter",
-        };
-    }
-    // EditorJSDelimiter constructor에서 this._element를 drawView로 생성합니다.
-    drawView() {
-        const div = document.createElement("div");
-        div.classList.add(this._CSS.block);
-        div.appendChild(document.createElement("HR"));
-        return div;
-    }
-}

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

@@ -1,60 +0,0 @@
-import EditorJSHeader from "@editorjs/header";
-import { Theme } from "@emotion/react";
-export declare const HeaderStyle: (theme: Theme) => import("@emotion/utils").SerializedStyles;
-export declare class Header extends EditorJSHeader {
-    save(toolsContent: HTMLDivElement): {
-        text: string;
-    };
-    renderSettings(): {
-        icon: string;
-        label: any;
-        onActivate: () => void;
-        closeOnActivate: boolean;
-        isActive: boolean;
-    }[];
-}
-export declare class HeaderBig extends Header {
-    get currentLevel(): {
-        type: string;
-        number: number;
-        tag: string;
-        svg: string;
-    };
-    static get toolbox(): {
-        icon: string;
-        title: string;
-    };
-    static get pasteConfig(): {
-        tags: string[];
-    };
-}
-export declare class HeaderMedium extends Header {
-    get currentLevel(): {
-        type: string;
-        number: number;
-        tag: string;
-        svg: string;
-    };
-    static get toolbox(): {
-        icon: string;
-        title: string;
-    };
-    static get pasteConfig(): {
-        tags: string[];
-    };
-}
-export declare class HeaderSmall extends Header {
-    get currentLevel(): {
-        type: string;
-        number: number;
-        tag: string;
-        svg: string;
-    };
-    static get toolbox(): {
-        icon: string;
-        title: string;
-    };
-    static get pasteConfig(): {
-        tags: string[];
-    };
-}

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

@@ -1,122 +0,0 @@
-import EditorJSHeader from "@editorjs/header";
-import { css } from "@emotion/react";
-import { h1Svg, h2Svg, h3Svg } from "../../../../icons";
-export const HeaderStyle = (theme) => css `
-  .ce-header {
-    color: ${theme.color.foreground.neutralBase};
-    font-family: ${theme.fontFamily.ui};
-  }
-  h1.ce-header {
-    font-family: ${theme.fontFamily.title};
-    font-weight: 900;
-    font-size: 32px;
-    line-height: 40px;
-    padding: 12px 0 24px;
-  }
-  h2.ce-header {
-    font-weight: 700;
-    font-size: 24px;
-    line-height: 32px;
-    padding: 12px 0 16px;
-  }
-  h3.ce-header {
-    font-weight: 700;
-    font-size: 18px;
-    line-height: 28px;
-    padding: 12px 0 16px;
-  }
-`;
-const AVAILABLE_LEVELS = [
-    {
-        type: "header",
-        number: 1,
-        tag: "H1",
-        svg: `<img src="${h1Svg}" />`,
-    },
-    {
-        type: "sub_header",
-        number: 2,
-        tag: "H2",
-        svg: `<img src="${h2Svg}" />`,
-    },
-    {
-        type: "sub_sub_header",
-        number: 3,
-        tag: "H3",
-        svg: `<img src="${h3Svg}" />`,
-    },
-];
-// https://github.com/editor-js/header/blob/master/src/index.js
-// 제목1, 제목2, 제목3을 블록 툴에 추가하기 위해 커스텀합니다.
-// Header의 data 타입중 level을 드롭합니다. type만으로 level을 구분할 수 있기 때문입니다.
-export class Header extends EditorJSHeader {
-    save(toolsContent) {
-        return {
-            text: toolsContent.innerHTML,
-        };
-    }
-    // tune을 했을 때 block이 다른 Header class의 블록으로 변경되어야 합니다.
-    renderSettings() {
-        return AVAILABLE_LEVELS.map((level) => ({
-            icon: level.svg,
-            label: this.api.i18n.t(`${level.type}`),
-            onActivate: () => {
-                const blockIndex = this.api.blocks.getCurrentBlockIndex();
-                this.api.blocks.delete(blockIndex);
-                this.api.blocks.insert(level.type, {
-                    text: this.data.text,
-                }, this._settings, blockIndex);
-            },
-            closeOnActivate: true,
-            isActive: this.currentLevel.number === level.number,
-        }));
-    }
-}
-export class HeaderBig extends Header {
-    get currentLevel() {
-        return AVAILABLE_LEVELS[0];
-    }
-    static get toolbox() {
-        return {
-            icon: `<img src="${h1Svg}" />`,
-            title: "HeadingBig",
-        };
-    }
-    static get pasteConfig() {
-        return {
-            tags: ["H1"],
-        };
-    }
-}
-export class HeaderMedium extends Header {
-    get currentLevel() {
-        return AVAILABLE_LEVELS[1];
-    }
-    static get toolbox() {
-        return {
-            icon: `<img src="${h2Svg}" />`,
-            title: "HeadingMedium",
-        };
-    }
-    static get pasteConfig() {
-        return {
-            tags: ["H2"],
-        };
-    }
-}
-export class HeaderSmall extends Header {
-    get currentLevel() {
-        return AVAILABLE_LEVELS[2];
-    }
-    static get toolbox() {
-        return {
-            icon: `<img src="${h3Svg}" />`,
-            title: "HeadingSmall",
-        };
-    }
-    static get pasteConfig() {
-        return {
-            tags: ["H3"],
-        };
-    }
-}

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

@@ -1,22 +0,0 @@
-import EditorJSImage from "@editorjs/image";
-export declare class Image extends EditorJSImage {
-    static get toolbox(): {
-        icon: string;
-        title: string;
-    };
-    static get tunes(): {
-        name: string;
-        icon: string;
-        title: string;
-        toggle: boolean;
-    }[];
-    renderSettings(): {
-        icon: any;
-        label: any;
-        name: any;
-        toggle: any;
-        isActive: any;
-        onActivate: () => void;
-    }[];
-    uploadUrl(url: string): void;
-}

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

@@ -1,61 +0,0 @@
-import EditorJSImage from "@editorjs/image";
-import { imageLineSvg, artboard2LineSvg, expandLeftRightLineSvg, paintLineSvg, } from "../../../../icons";
-// https://github.com/editor-js/image/blob/master/src/index.js
-// 내부 tunes를 수정하기 위해 기존 Image를 상속해서 작성했습니다.
-export class Image extends EditorJSImage {
-    static get toolbox() {
-        return {
-            icon: `<img src="${imageLineSvg}" />`,
-            title: "Image",
-        };
-    }
-    static get tunes() {
-        return [
-            {
-                name: "withBorder",
-                icon: `<img src="${artboard2LineSvg}" />`,
-                title: "With border",
-                toggle: true,
-            },
-            {
-                name: "stretched",
-                icon: `<img src="${expandLeftRightLineSvg}" />`,
-                title: "Stretch image",
-                toggle: true,
-            },
-            {
-                name: "withBackground",
-                icon: `<img src="${paintLineSvg}" />`,
-                title: "With background",
-                toggle: true,
-            },
-        ];
-    }
-    renderSettings() {
-        // Merge default tunes with the ones that might be added by user
-        // @see https://github.com/editor-js/image/pull/49
-        const tunes = Image.tunes.concat(this.config.actions);
-        return tunes.map((tune) => ({
-            icon: tune.icon,
-            label: this.api.i18n.t(tune.title),
-            name: tune.name,
-            toggle: tune.toggle,
-            isActive: this.data[tune.name],
-            onActivate: () => {
-                /* If it'a user defined tune, execute it's callback stored in action property */
-                if (typeof tune.action === "function") {
-                    tune.action(tune.name);
-                    return;
-                }
-                this.tuneToggled(tune.name);
-            },
-        }));
-    }
-    // 아직 업로드를 할 수 있는 시스템이 없으므로 오류를 피하기 위해 uploadUrl 함수를 임시로 override 합니다.
-    uploadUrl(url) {
-        this.ui.showPreloader();
-        this.image = {
-            url: url,
-        };
-    }
-}

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

@@ -1,28 +0,0 @@
-import EditorJSNestedList from "@editorjs/nested-list";
-export declare const NestedListStyle: import("@emotion/utils").SerializedStyles;
-declare class NestedList extends EditorJSNestedList {
-    constructor({ data, config, api, readOnly }: any);
-    save(): {
-        items: any;
-    };
-    renderSettings(): any[];
-}
-export declare class ListOrdered extends NestedList {
-    static get toolbox(): {
-        title: string;
-        icon: string;
-    };
-    static get pasteConfig(): {
-        tags: string[];
-    };
-}
-export declare class ListUnordered extends NestedList {
-    static get toolbox(): {
-        title: string;
-        icon: string;
-    };
-    static get pasteConfig(): {
-        tags: string[];
-    };
-}
-export {};

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

@@ -1,74 +0,0 @@
-import EditorJSNestedList from "@editorjs/nested-list";
-import { css } from "@emotion/react";
-import { listOrdered2Svg, listUnorderedSvg } from "../../../../icons";
-const STYLE_TO_LIST_TYPE = (style) => {
-    switch (style) {
-        case "ordered":
-            return "numbered_list";
-        case "unordered":
-        default:
-            return "bulleted_list";
-    }
-};
-const TUNE_ICONS = [
-    `<img src="${listUnorderedSvg}" />`,
-    `<img src="${listOrdered2Svg}" />`,
-];
-export const NestedListStyle = css `
-  ul.cdx-nested-list {
-    margin-left: 10px;
-  }
-`;
-// https://github.com/editor-js/nested-list/blob/main/src/index.js
-// 일반 목록, 숫자 목록을 블록 툴에 추가하기 위해 커스텀합니다.
-// NestedList의 data 타입중 style을 드롭합니다. type만으로 style을 구분할 수 있기 때문입니다.
-class NestedList extends EditorJSNestedList {
-    constructor({ data, config, api, readOnly }) {
-        super({ data, config, api, readOnly });
-        this.data = {
-            items: data.items || [],
-            style: this.defaultListStyle,
-        };
-    }
-    save() {
-        return {
-            items: super.save().items,
-        };
-    }
-    // tune을 했을 때 block이 다른 Nestedlist class의 블록으로 변경되어야 합니다.
-    renderSettings() {
-        return Array.from(super.renderSettings()).map((setting, i) => (Object.assign(Object.assign({}, setting), { icon: TUNE_ICONS[i], isActive: this.data.style === setting.name, onActivate: () => {
-                const blockIndex = this.api.blocks.getCurrentBlockIndex();
-                this.api.blocks.delete(blockIndex);
-                this.api.blocks.insert(STYLE_TO_LIST_TYPE(setting.name), {
-                    items: this.save().items,
-                }, this.config, blockIndex);
-            } })));
-    }
-}
-export class ListOrdered extends NestedList {
-    static get toolbox() {
-        return {
-            title: "ListOrdered",
-            icon: `<img src="${listOrdered2Svg}" />`,
-        };
-    }
-    static get pasteConfig() {
-        return {
-            tags: ["OL", "LI"],
-        };
-    }
-}
-export class ListUnordered extends NestedList {
-    static get toolbox() {
-        return {
-            title: "ListUnordered",
-            icon: `<img src="${listUnorderedSvg}" />`,
-        };
-    }
-    static get pasteConfig() {
-        return {
-            tags: ["UL", "LI"],
-        };
-    }
-}

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

@@ -1,42 +0,0 @@
-import { BlockTool } from "@editorjs/editorjs";
-import { Theme } from "@emotion/react";
-type COLOR_TYPE = "grey" | "red" | "yellow" | "blue" | "green";
-export declare const QuoteStyle: (theme: Theme) => import("@emotion/utils").SerializedStyles;
-export declare class Quote implements BlockTool {
-    api: any;
-    config: any;
-    readOnly: any;
-    private _wrapper;
-    constructor({ api, config, readOnly, data }: any);
-    /** 주어진 data에 따라 HTML Element를 반환함. */
-    private createWrapper;
-    /** 주어진 data에 따라 this._wrapper를 업데이트함. */
-    private updateWrapper;
-    get colors(): string[];
-    get defaultColor(): string;
-    get color(): COLOR_TYPE;
-    save(): {
-        color: COLOR_TYPE;
-        text: string;
-    };
-    render(): HTMLDivElement;
-    renderSettings(): {
-        name: string;
-        icon: string;
-        label: any;
-        isActive: boolean;
-        closeOnActivate: boolean;
-        onActivate: () => void;
-    }[];
-    static get isReadOnlySupported(): boolean;
-    static get enableLineBreaks(): boolean;
-    static get toolbox(): {
-        icon: string;
-        title: string;
-    };
-    onPaste(event: any): void;
-    static get pasteConfig(): {
-        tags: string[];
-    };
-}
-export {};