@squiz/formatted-text-editor 2.0.1 → 2.2.0

package/lib/Extensions/ImageExtension/DAMImageExtension.js

@@ -0,0 +1,97 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DAMImageExtension = void 0;
+const core_1 = require("@remirror/core");
+const remirror_1 = require("remirror");
+const Extensions_1 = require("../Extensions");
+let DAMImageExtension = class DAMImageExtension extends core_1.NodeExtension {
+    get name() {
+        return Extensions_1.NodeName.DAMImage;
+    }
+    createTags() {
+        return [core_1.ExtensionTag.InlineNode, core_1.ExtensionTag.Media];
+    }
+    createNodeSpec(extra, override) {
+        return {
+            inline: true,
+            draggable: true,
+            selectable: true,
+            ...override,
+            attrs: {
+                ...extra.defaults(),
+                damObjectId: {},
+                damSystemIdentifier: {},
+                damSystemType: {},
+                damAdditional: { default: undefined },
+                src: { default: '' },
+            },
+            parseDOM: [
+                {
+                    tag: 'img[data-dam-object-id]',
+                    getAttrs: (node) => {
+                        if (!(0, core_1.isElementDomNode)(node)) {
+                            return false;
+                        }
+                        const damObjectId = node.getAttribute('data-dam-object-id');
+                        const damSystemIdentifier = node.getAttribute('data-dam-system-identifier');
+                        const damSystemType = node.getAttribute('data-dam-system-type');
+                        let damAdditional = node.getAttribute('data-dam-additional') || undefined;
+                        if (!damObjectId || !damSystemIdentifier || !damSystemType) {
+                            return false;
+                        }
+                        if (damAdditional) {
+                            damAdditional = JSON.parse(damAdditional);
+                        }
+                        return {
+                            ...extra.parse(node),
+                            damObjectId,
+                            damSystemIdentifier,
+                            damSystemType,
+                            damAdditional,
+                            src: '',
+                        };
+                    },
+                },
+            ],
+            toDOM: (node) => {
+                const { damObjectId, damSystemIdentifier, damSystemType, damAdditional, src, ...rest } = (0, core_1.omitExtraAttributes)(node.attrs, extra);
+                return [
+                    'img',
+                    {
+                        ...extra.dom(node),
+                        ...rest,
+                        src,
+                        'data-dam-object-id': damObjectId,
+                        'data-dam-system-identifier': damSystemIdentifier,
+                        'data-dam-system-type': damSystemType,
+                        'data-dam-additional': damAdditional ? JSON.stringify(damAdditional) : undefined,
+                    },
+                ];
+            },
+        };
+    }
+    insertDAMImage(attrs) {
+        return ({ tr, dispatch }) => {
+            const { from, to } = (0, remirror_1.getTextSelection)(tr.selection, tr.doc);
+            const node = this.type.create({ ...attrs, src: attrs.url });
+            dispatch?.(tr.replaceRangeWith(from, to, node));
+            return true;
+        };
+    }
+};
+__decorate([
+    (0, core_1.command)()
+], DAMImageExtension.prototype, "insertDAMImage", null);
+DAMImageExtension = __decorate([
+    (0, core_1.extension)({
+        defaultOptions: {},
+        defaultPriority: core_1.ExtensionPriority.High,
+    })
+], DAMImageExtension);
+exports.DAMImageExtension = DAMImageExtension;

package/lib/Icons/AiIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ICON_AI: React.JSX.Element;

package/lib/Icons/AiIcon.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ICON_AI = void 0;
+const react_1 = __importDefault(require("react"));
+exports.ICON_AI = (react_1.default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("g", { id: "sq-AI-icon", clipPath: "url(#clip0_3060_44545)" },
+        react_1.default.createElement("g", { id: "circle", filter: "url(#filter0_dd_3060_44545)" },
+            react_1.default.createElement("rect", { x: "2", y: "2", width: "20", height: "20", rx: "10", fill: "url(#paint0_linear_3060_44545)" }),
+            react_1.default.createElement("rect", { x: "1.5", y: "1.5", width: "21", height: "21", rx: "10.5", stroke: "white" })),
+        react_1.default.createElement("g", { id: "Vector", filter: "url(#filter1_d_3060_44545)" },
+            react_1.default.createElement("path", { d: "M11.2084 9.79157L10.1219 7.39977C9.88269 6.86674 9.11731 6.86674 8.87813 7.39977L7.79157 9.79157L5.39977 10.8781C4.86674 11.1241 4.86674 11.8827 5.39977 12.1219L7.79157 13.2084L8.87813 15.6002C9.12415 16.1333 9.88269 16.1333 10.1219 15.6002L11.2084 13.2084L13.6002 12.1219C14.1333 11.8759 14.1333 11.1173 13.6002 10.8781L11.2084 9.79157Z", fill: "white" })),
+        react_1.default.createElement("g", { id: "Vector_2", opacity: "0.8", filter: "url(#filter2_d_3060_44545)" },
+            react_1.default.createElement("path", { d: "M17.4491 10.4491L16.8493 11.7779C16.7126 12.074 16.2874 12.074 16.1507 11.7779L15.5509 10.4415L14.2221 9.84169C13.926 9.70501 13.926 9.2874 14.2221 9.15072L15.5585 8.55087L16.1583 7.2221C16.295 6.92597 16.7126 6.92597 16.8493 7.2221L17.4491 8.55847L18.7779 9.15831C19.074 9.29499 19.074 9.7126 18.7779 9.84928L17.4491 10.4491Z", fill: "white" })),
+        react_1.default.createElement("g", { id: "Ellipse 55", opacity: "0.8", filter: "url(#filter3_d_3060_44545)" },
+            react_1.default.createElement("circle", { cx: "14.5", cy: "16.5", r: "1.5", fill: "white" }))),
+    react_1.default.createElement("defs", null,
+        react_1.default.createElement("filter", { id: "filter0_dd_3060_44545", x: "0", y: "0", width: "24", height: "24", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+            react_1.default.createElement("feOffset", { dx: "1", dy: "1" }),
+            react_1.default.createElement("feComposite", { in2: "hardAlpha", operator: "out" }),
+            react_1.default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.2 0 0 0 0 0.709941 0 0 0 0 1 0 0 0 0.64 0" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_3060_44545" }),
+            react_1.default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+            react_1.default.createElement("feOffset", { dx: "-1", dy: "-1" }),
+            react_1.default.createElement("feComposite", { in2: "hardAlpha", operator: "out" }),
+            react_1.default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.96 0 0 0 0 0.76 0 0 0 0 0.48 0 0 0 0.64 0" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in2: "effect1_dropShadow_3060_44545", result: "effect2_dropShadow_3060_44545" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_3060_44545", result: "shape" })),
+        react_1.default.createElement("filter", { id: "filter1_d_3060_44545", x: "5", y: "7", width: "9", height: "10", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+            react_1.default.createElement("feOffset", { dy: "1" }),
+            react_1.default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_3060_44545" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_3060_44545", result: "shape" })),
+        react_1.default.createElement("filter", { id: "filter2_d_3060_44545", x: "14", y: "7", width: "5", height: "6.30682", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+            react_1.default.createElement("feOffset", { dy: "1.30682" }),
+            react_1.default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_3060_44545" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_3060_44545", result: "shape" })),
+        react_1.default.createElement("filter", { id: "filter3_d_3060_44545", x: "13", y: "15", width: "3", height: "4.32373", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+            react_1.default.createElement("feOffset", { dy: "1.32373" }),
+            react_1.default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_3060_44545" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_3060_44545", result: "shape" })),
+        react_1.default.createElement("linearGradient", { id: "paint0_linear_3060_44545", x1: "6.54545", y1: "3.81818", x2: "17", y2: "20.1818", gradientUnits: "userSpaceOnUse" },
+            react_1.default.createElement("stop", { stopColor: "#F5D6AB" }),
+            react_1.default.createElement("stop", { offset: "0.251162", stopColor: "#F895A7" }),
+            react_1.default.createElement("stop", { offset: "0.585", stopColor: "#77A1F1" }),
+            react_1.default.createElement("stop", { offset: "0.861262", stopColor: "#68C8FF" })),
+        react_1.default.createElement("clipPath", { id: "clip0_3060_44545" },
+            react_1.default.createElement("rect", { width: "24", height: "24", fill: "white" })))));