@quadrats/common 0.7.3 → 1.0.0

package/card/index.cjs.js

@@ -0,0 +1,163 @@
+'use strict';
+
+var core = require('@quadrats/core');
+
+const CARD_TYPE = 'card';
+const CARD_IMAGE_TYPE = 'card_image';
+const CARD_CONTENTS_TYPE = 'card_contents';
+const CARD_PLACEHOLDER_TYPE = 'card_placeholder';
+const CARD_TYPES = {
+    card: CARD_TYPE,
+    card_image: CARD_IMAGE_TYPE,
+    card_contents: CARD_CONTENTS_TYPE,
+};
+
+function createCard(options) {
+    const { types: typesOptions, accept: acceptOptions, ratio, limitSize: limitSizeOptions, confirmModal = true, getBody, getHeaders, getUrl, uploader, } = options;
+    const types = Object.assign(Object.assign({}, CARD_TYPES), typesOptions);
+    const limitSize = limitSizeOptions || 5;
+    const accept = acceptOptions || ['image/jpeg', 'image/jpg', 'image/png'];
+    const insertCardPlaceholder = (editor) => {
+        const cardPlaceholderElement = {
+            type: CARD_PLACEHOLDER_TYPE,
+            ratio,
+            children: [{ text: '' }],
+        };
+        core.Editor.withoutNormalizing(editor, () => {
+            core.Transforms.insertNodes(editor, cardPlaceholderElement);
+        });
+    };
+    const removeCardPlaceholder = (editor) => {
+        core.Transforms.removeNodes(editor, {
+            match: (node) => core.Element.isElement(node) && node.type === CARD_PLACEHOLDER_TYPE,
+        });
+    };
+    const createCardElement = (cardValues) => {
+        var _a;
+        const cardImageElement = {
+            type: types.card_image,
+            src: ((_a = cardValues.imageItem) === null || _a === void 0 ? void 0 : _a.url) || '',
+            ratio,
+            children: [{ text: '' }],
+        };
+        const cardContentsElement = {
+            type: types.card_contents,
+            children: [{ text: '' }],
+            alignment: cardValues.alignment,
+            title: cardValues.title,
+            description: cardValues.description,
+            remark: cardValues.remark,
+            haveLink: cardValues.haveLink,
+            linkText: cardValues.linkText,
+            linkUrl: cardValues.linkUrl,
+        };
+        return Object.assign(Object.assign({ type: types.card, confirmModal }, cardValues), { children: [cardImageElement, cardContentsElement] });
+    };
+    const insertCard = ({ editor, cardValues }) => {
+        core.Transforms.insertNodes(editor, [createCardElement(cardValues), core.createParagraphElement()]);
+    };
+    const updateCardElement = ({ editor, cardValues, path }) => {
+        var _a;
+        core.Transforms.setNodes(editor, cardValues, { at: path });
+        const imageEntries = core.Editor.nodes(editor, {
+            at: path,
+            match: (node) => core.Element.isElement(node) && node.type === types.card_image,
+            mode: 'all',
+        });
+        const imageNode = imageEntries.next().value;
+        const contentsEntries = core.Editor.nodes(editor, {
+            at: path,
+            match: (node) => core.Element.isElement(node) && node.type === types.card_contents,
+            mode: 'all',
+        });
+        const contentsNode = contentsEntries.next().value;
+        if (imageNode) {
+            const [, imagePath] = imageNode;
+            core.Transforms.setNodes(editor, { src: ((_a = cardValues.imageItem) === null || _a === void 0 ? void 0 : _a.url) || '' }, { at: imagePath });
+        }
+        if (contentsNode) {
+            const [, contentsPath] = contentsNode;
+            core.Transforms.setNodes(editor, {
+                alignment: cardValues.alignment,
+                title: cardValues.title,
+                description: cardValues.description,
+                remark: cardValues.remark,
+                haveLink: cardValues.haveLink,
+                linkText: cardValues.linkText,
+                linkUrl: cardValues.linkUrl,
+            }, {
+                at: contentsPath,
+            });
+        }
+    };
+    const updateCardAlignment = ({ editor, alignment, path }) => {
+        core.Transforms.setNodes(editor, { alignment }, { at: path });
+        const contentsEntries = core.Editor.nodes(editor, {
+            at: path,
+            match: (node) => core.Element.isElement(node) && node.type === types.card_contents,
+            mode: 'all',
+        });
+        const contentsNode = contentsEntries.next().value;
+        if (contentsNode) {
+            const [, contentsPath] = contentsNode;
+            core.Transforms.setNodes(editor, {
+                alignment,
+            }, {
+                at: contentsPath,
+            });
+        }
+    };
+    return {
+        types,
+        createCardElement,
+        insertCard,
+        updateCardElement,
+        updateCardAlignment,
+        accept,
+        ratio,
+        limitSize,
+        confirmModal,
+        insertCardPlaceholder,
+        removeCardPlaceholder,
+        getBody,
+        getHeaders,
+        getUrl,
+        uploader,
+        with(editor) {
+            const { normalizeNode } = editor;
+            editor.normalizeNode = (entry) => {
+                const [node, path] = entry;
+                if (core.Element.isElement(node)) {
+                    const type = node.type;
+                    if (type === types.card) {
+                        for (const [child, childPath] of core.Node.children(editor, path)) {
+                            if (core.Element.isElement(child) &&
+                                child.type !== types.card_contents &&
+                                child.type !== types.card_image) {
+                                core.Transforms.removeNodes(editor, { at: childPath });
+                                return;
+                            }
+                        }
+                    }
+                    else if (type === types.card_contents || type === types.card_image) {
+                        for (const [child, childPath] of core.Node.children(editor, path)) {
+                            if (core.Element.isElement(child)) {
+                                core.Transforms.removeNodes(editor, { at: childPath });
+                                return;
+                            }
+                        }
+                    }
+                }
+                normalizeNode(entry);
+            };
+            return editor;
+        },
+    };
+}
+
+exports.CARD_CONTENTS_TYPE = CARD_CONTENTS_TYPE;
+exports.CARD_IMAGE_TYPE = CARD_IMAGE_TYPE;
+exports.CARD_PLACEHOLDER_TYPE = CARD_PLACEHOLDER_TYPE;
+exports.CARD_TYPE = CARD_TYPE;
+exports.CARD_TYPES = CARD_TYPES;
+exports.createCard = createCard;

package/card/index.d.ts

@@ -0,0 +1,3 @@
+export * from './typings';
+export * from './constants';
+export * from './createCard';

package/card/index.js

@@ -0,0 +1,2 @@
+export { CARD_CONTENTS_TYPE, CARD_IMAGE_TYPE, CARD_PLACEHOLDER_TYPE, CARD_TYPE, CARD_TYPES } from './constants.js';
+export { createCard } from './createCard.js';

package/card/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@quadrats/common/card",
+  "sideEffects": false,
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
+}

package/card/typings.d.ts

@@ -0,0 +1,73 @@
+import { Editor, Withable, QuadratsElement, WithElementType, Text, Path } from '@quadrats/core';
+import { ImageAccept, FileUploaderGetBody, FileUploaderGetHeaders, FileUploaderGetUrl, FileUploaderImplement } from '@quadrats/common/file-uploader';
+export type CardTypeKey = 'card';
+export type CardImageTypeKey = 'card_image';
+export type CardContentsTypeKey = 'card_contents';
+export type CardTypes = Record<CardTypeKey | CardImageTypeKey | CardContentsTypeKey, string>;
+export type CardAlignment = 'leftImageRightText' | 'rightImageLeftText' | 'noImage';
+export type CardImageItem = {
+    file: File;
+    progress: number;
+    preview: string;
+    url: string;
+};
+export type CardElementValues = {
+    alignment: CardAlignment;
+    imageItem: CardImageItem | null;
+    title: string;
+    description: string;
+    remark: string;
+    haveLink: boolean;
+    linkText: string;
+    linkUrl: string;
+};
+export interface CardElement extends QuadratsElement, WithElementType, CardElementValues {
+    confirmModal: boolean;
+}
+export interface CardImageElement extends QuadratsElement, WithElementType {
+    children: [Text];
+    ratio?: [number, number];
+    src: string;
+}
+export interface CardContentsElement extends QuadratsElement, WithElementType {
+    children: [Text];
+    alignment: CardAlignment;
+    title: string;
+    description: string;
+    remark: string;
+    haveLink: boolean;
+    linkText: string;
+    linkUrl: string;
+}
+export interface CardPlaceholderElement extends QuadratsElement, WithElementType {
+    ratio?: [number, number];
+    children: [Text];
+}
+export interface Card<T extends Editor = Editor> extends Withable {
+    types: CardTypes;
+    insertCardPlaceholder(editor: T): void;
+    removeCardPlaceholder(editor: T): void;
+    createCardElement(cardValues: CardElementValues): CardElement;
+    insertCard({ editor, cardValues }: {
+        editor: T;
+        cardValues: CardElementValues;
+    }): void;
+    updateCardElement({ editor, cardValues, path }: {
+        editor: T;
+        cardValues: CardElementValues;
+        path: Path;
+    }): void;
+    updateCardAlignment({ editor, alignment, path }: {
+        editor: T;
+        alignment: CardAlignment;
+        path: Path;
+    }): void;
+    accept: ImageAccept[];
+    ratio?: [number, number];
+    limitSize: number;
+    confirmModal: boolean;
+    getBody: FileUploaderGetBody;
+    getHeaders?: FileUploaderGetHeaders;
+    getUrl: FileUploaderGetUrl;
+    uploader?: FileUploaderImplement;
+}

package/carousel/_virtual/_tslib.js

@@ -0,0 +1,33 @@
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+export { __awaiter };

package/carousel/constants.d.ts

@@ -0,0 +1,6 @@
+import { CarouselTypes } from './typings';
+export declare const CAROUSEL_TYPE = "carousel";
+export declare const CAROUSEL_IMAGES_TYPE = "carousel_images";
+export declare const CAROUSEL_CAPTION_TYPE = "carousel_caption";
+export declare const CAROUSEL_PLACEHOLDER_TYPE = "carousel_placeholder";
+export declare const CAROUSEL_TYPES: CarouselTypes;

package/carousel/constants.js

@@ -0,0 +1,11 @@
+const CAROUSEL_TYPE = 'carousel';
+const CAROUSEL_IMAGES_TYPE = 'carousel_images';
+const CAROUSEL_CAPTION_TYPE = 'carousel_caption';
+const CAROUSEL_PLACEHOLDER_TYPE = 'carousel_placeholder';
+const CAROUSEL_TYPES = {
+    carousel: CAROUSEL_TYPE,
+    carousel_images: CAROUSEL_IMAGES_TYPE,
+    carousel_caption: CAROUSEL_CAPTION_TYPE,
+};
+
+export { CAROUSEL_CAPTION_TYPE, CAROUSEL_IMAGES_TYPE, CAROUSEL_PLACEHOLDER_TYPE, CAROUSEL_TYPE, CAROUSEL_TYPES };

package/carousel/createCarousel.d.ts

@@ -0,0 +1,16 @@
+import { Editor } from '@quadrats/core';
+import { ImageAccept, FileUploaderGetBody, FileUploaderGetHeaders, FileUploaderGetUrl, FileUploaderImplement } from '@quadrats/common/file-uploader';
+import { Carousel, CarouselTypes } from './typings';
+export interface CreateCarouselOptions {
+    types?: Partial<CarouselTypes>;
+    accept?: ImageAccept[];
+    ratio?: [number, number];
+    maxLength?: number;
+    limitSize?: number;
+    confirmModal?: boolean;
+    getBody: FileUploaderGetBody;
+    getHeaders?: FileUploaderGetHeaders;
+    getUrl: FileUploaderGetUrl;
+    uploader?: FileUploaderImplement;
+}
+export declare function createCarousel(options: CreateCarouselOptions): Carousel<Editor>;

package/carousel/createCarousel.js

@@ -0,0 +1,127 @@
+import { __awaiter } from './_virtual/_tslib.js';
+import { Element, Node, Transforms, Editor, createParagraphElement } from '@quadrats/core';
+import { CAROUSEL_TYPES, CAROUSEL_PLACEHOLDER_TYPE } from './constants.js';
+import { getFilesFromInput } from './getFilesFromInput.js';
+
+function createCarousel(options) {
+    const { types: typesOptions, accept: acceptOptions, ratio, maxLength: maxLengthOptions, limitSize: limitSizeOptions, confirmModal = true, getBody, getHeaders, getUrl, uploader, } = options;
+    const types = Object.assign(Object.assign({}, CAROUSEL_TYPES), typesOptions);
+    const maxLength = maxLengthOptions || 10;
+    const limitSize = limitSizeOptions || 5;
+    const accept = acceptOptions || ['image/jpeg', 'image/jpg', 'image/png'];
+    const selectFiles = () => __awaiter(this, void 0, void 0, function* () {
+        const files = yield getFilesFromInput({ accept });
+        return files;
+    });
+    const insertCarouselPlaceholder = (editor) => {
+        const carouselPlaceholderElement = {
+            type: CAROUSEL_PLACEHOLDER_TYPE,
+            ratio,
+            children: [{ text: '' }],
+        };
+        Editor.withoutNormalizing(editor, () => {
+            Transforms.insertNodes(editor, carouselPlaceholderElement);
+        });
+    };
+    const removeCarouselPlaceholder = (editor) => {
+        Transforms.removeNodes(editor, {
+            match: (node) => Element.isElement(node) && node.type === CAROUSEL_PLACEHOLDER_TYPE,
+        });
+    };
+    const createCarouselElement = ({ items }) => {
+        const carouselImagesElement = {
+            type: types.carousel_images,
+            images: items.map((i) => i.url),
+            ratio,
+            children: [{ text: '' }],
+        };
+        const carouselCaptionElement = {
+            type: types.carousel_caption,
+            captions: items.map((i) => i.caption),
+            children: [{ text: '' }],
+        };
+        return {
+            type: types.carousel,
+            confirmModal,
+            items,
+            children: [carouselImagesElement, carouselCaptionElement],
+        };
+    };
+    const insertCarousel = ({ editor, items }) => {
+        Transforms.insertNodes(editor, [createCarouselElement({ items }), createParagraphElement()]);
+    };
+    const updateCarouselElement = ({ editor, items, path }) => {
+        Transforms.setNodes(editor, { items }, { at: path });
+        const imagesEntries = Editor.nodes(editor, {
+            at: path,
+            match: (node) => Element.isElement(node) && node.type === types.carousel_images,
+            mode: 'all',
+        });
+        const imagesNode = imagesEntries.next().value;
+        const captionEntries = Editor.nodes(editor, {
+            at: path,
+            match: (node) => Element.isElement(node) && node.type === types.carousel_caption,
+            mode: 'all',
+        });
+        const captionNode = captionEntries.next().value;
+        if (imagesNode) {
+            const [, imagesPath] = imagesNode;
+            Transforms.setNodes(editor, { images: items.map((i) => i.url) }, { at: imagesPath });
+        }
+        if (captionNode) {
+            const [, captionPath] = captionNode;
+            Transforms.setNodes(editor, { captions: items.map((i) => i.caption) }, {
+                at: captionPath,
+            });
+        }
+    };
+    return {
+        types,
+        accept,
+        ratio,
+        maxLength,
+        limitSize,
+        confirmModal,
+        selectFiles,
+        insertCarouselPlaceholder,
+        removeCarouselPlaceholder,
+        createCarouselElement,
+        insertCarousel,
+        updateCarouselElement,
+        getBody,
+        getHeaders,
+        getUrl,
+        uploader,
+        with(editor) {
+            const { normalizeNode } = editor;
+            editor.normalizeNode = (entry) => {
+                const [node, path] = entry;
+                if (Element.isElement(node)) {
+                    const type = node.type;
+                    if (type === types.carousel) {
+                        for (const [child, childPath] of Node.children(editor, path)) {
+                            if (Element.isElement(child) &&
+                                child.type !== types.carousel_caption &&
+                                child.type !== types.carousel_images) {
+                                Transforms.removeNodes(editor, { at: childPath });
+                                return;
+                            }
+                        }
+                    }
+                    else if (type === types.carousel_caption || type === types.carousel_images) {
+                        for (const [child, childPath] of Node.children(editor, path)) {
+                            if (Element.isElement(child)) {
+                                Transforms.removeNodes(editor, { at: childPath });
+                                return;
+                            }
+                        }
+                    }
+                }
+                normalizeNode(entry);
+            };
+            return editor;
+        },
+    };
+}
+
+export { createCarousel };

package/carousel/getFilesFromInput.d.ts

@@ -0,0 +1,4 @@
+import { ImageAccept } from '@quadrats/common/file-uploader';
+export declare function getFilesFromInput(options: {
+    accept: ImageAccept[];
+}): Promise<File[] | undefined>;

package/carousel/getFilesFromInput.js

@@ -0,0 +1,30 @@
+function getFilesFromInput(options) {
+    const { accept } = options;
+    return new Promise((resolve) => {
+        const inputEl = document.createElement('input');
+        if (accept) {
+            inputEl.accept = accept.join(',');
+        }
+        inputEl.multiple = true;
+        inputEl.type = 'file';
+        inputEl.addEventListener('cancel', () => {
+            resolve(undefined);
+        });
+        inputEl.addEventListener('change', () => {
+            const { files: fileList } = inputEl;
+            if (!fileList || !fileList.length) {
+                resolve(undefined);
+            }
+            else {
+                const files = [];
+                for (const file of fileList) {
+                    files.push(file);
+                }
+                resolve(files);
+            }
+        });
+        inputEl.click();
+    });
+}
+
+export { getFilesFromInput };