@worktile/theia 21.0.0 → 21.1.0

package/fesm2022/worktile-theia.mjs

@@ -14307,6 +14307,69 @@ const createHrPlugin = (locale) => createPluginFactory({
     }
 })();
 
+const getListTypes = () => {
+    return [ElementKinds.bulletedList, ElementKinds.numberedList];
+};
+
+const EDITOR_TO_IMAGE_TO_FLOATING_MAP = new WeakMap();
+const getImageWithFloatingMap = (editor) => {
+    let imageWithFloatingMap = EDITOR_TO_IMAGE_TO_FLOATING_MAP.get(editor);
+    if (!imageWithFloatingMap) {
+        imageWithFloatingMap = new Map();
+        EDITOR_TO_IMAGE_TO_FLOATING_MAP.set(editor, imageWithFloatingMap);
+    }
+    return imageWithFloatingMap;
+};
+const isFloatingElementByType = (element) => {
+    return (element.type === ElementKinds.paragraph ||
+        element.type === ElementKinds.blockquote ||
+        isHeadingElement(element) ||
+        getListTypes().includes(element.type));
+};
+const isImageWithFloating = (element) => {
+    return element.layout === LayoutTypes.wrapLeft || element.layout === LayoutTypes.wrapRight;
+};
+const getFloatingElementsAndAccumulatedHeight = (editor, element, imageHeight) => {
+    const index = editor.children.indexOf(element);
+    let accumulatedHeight = 0;
+    const floatingElements = [];
+    for (let i = index + 1; i < editor.children.length; i++) {
+        const child = editor.children[i];
+        if (isFloatingElementByType(child) && accumulatedHeight <= imageHeight) {
+            const currentHeight = getCachedHeightByElement(editor, child) || editor.getRoughHeight(child);
+            accumulatedHeight += currentHeight;
+            floatingElements.push(child);
+        }
+        else {
+            break;
+        }
+    }
+    return [floatingElements, accumulatedHeight];
+};
+const calcFloatingElements = (editor, element, imageHeight) => {
+    const imageWithFloatingMap = getImageWithFloatingMap(editor);
+    if (isImageWithFloating(element)) {
+        const [floatingElements, accumulatedHeight] = getFloatingElementsAndAccumulatedHeight(editor, element, imageHeight);
+        if (accumulatedHeight > 0 && floatingElements.length > 0) {
+            const value = {};
+            floatingElements.forEach(ele => (value[ele.key] = true));
+            imageWithFloatingMap.set(element.key, value);
+            return [floatingElements, accumulatedHeight];
+        }
+    }
+    else {
+        imageWithFloatingMap.delete(element.key);
+    }
+    return [[], 0];
+};
+const isFloatingElement = (editor, element) => {
+    const imageWithFloatingMap = getImageWithFloatingMap(editor);
+    for (const [, value] of imageWithFloatingMap) {
+        return !!value[element.key];
+    }
+    return false;
+};
+
 class TheImage extends TheBaseElement {
     get isOpen() {
         return this.layoutToolbarRef && this.layoutToolbarRef.getOverlayRef() && this.layoutToolbarRef.getOverlayRef().hasAttached();
@@ -14376,7 +14439,7 @@ class TheImage extends TheBaseElement {
                 handle: (e) => this.onDelete(e)
             }
         ];
-        this.dragable = false;
+        this.draggable = false;
         this.beforeContextChange = (value) => {
             if (value.element !== this.element && value.element.thumbUrl) {
                 let thumbUrl = value.element.thumbUrl;
@@ -14551,7 +14614,7 @@ class TheImage extends TheBaseElement {
         }
         event.preventDefault();
         event.stopPropagation();
-        this.dragable = true;
+        this.draggable = true;
         const imgElement = this.img.nativeElement;
         const options = {
             axis,
@@ -14564,7 +14627,7 @@ class TheImage extends TheBaseElement {
         this.mouseMoveSubscription = this.theContextService.onMouseMove$.subscribe(e => this.mouseMoveHandle(e, options));
     }
     mouseMoveHandle(event, options) {
-        if (this.dragable) {
+        if (this.draggable) {
             const { axis, printerPositionX, printerPositionY, internalWidth, internalHeight, maxWidth } = options;
             const isReversal = axis.includes('-');
             let offsetX = event.pageX - printerPositionX;
@@ -14616,8 +14679,8 @@ class TheImage extends TheBaseElement {
         }
     }
     endDrag(event) {
-        if (this.dragable) {
-            this.dragable = false;
+        if (this.draggable) {
+            this.draggable = false;
             this.mouseMoveSubscription.unsubscribe();
             if (this.imageEntry.width === this.theContextService.getOptions().width &&
                 this.imageEntry.width <= this.naturalWidth &&
@@ -14770,6 +14833,14 @@ class TheImage extends TheBaseElement {
             });
         }
     }
+    calcHeight() {
+        const height = super.calcHeight();
+        const [, accumulatedHeight] = calcFloatingElements(this.editor, this.element, height);
+        if (accumulatedHeight > height) {
+            return accumulatedHeight;
+        }
+        return height;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: TheImage, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.ThyImageGroup }, { token: THE_IMAGE_SERVICE_TOKEN }, { token: TheContextService }, { token: i1.ThyPopover }, { token: i2.Overlay }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: TheImage, isStandalone: true, selector: "the-image, [theImage]", providers: [ThyImageService], viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }, { propertyName: "imageDirective", first: true, predicate: ThyImageDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"the-image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n  @if (imageEntry.thumbUrl) {\n    <div #imageContent class=\"image-content\" contenteditable=\"false\" [class.cursor-pointer]=\"!selection\">\n      <img\n        #img\n        thyImage\n        class=\"main-image\"\n        [class.image-collapsed]=\"selection && !uploading\"\n        [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n        [alt]=\"imageEntry.name\"\n        [thySrc]=\"imageEntry.thumbUrl\"\n        [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n        [thyOriginSrc]=\"imageEntry.originUrl\"\n        [thyDisablePreview]=\"disablePreview\"\n        [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n        (load)=\"imageLoaded($event)\"\n        (mousedown)=\"preventDefault($event)\"\n        (error)=\"imageError($event)\"\n        (click)=\"imageClick($event)\"\n      />\n      @if (isCollapsedAndNonReadonly) {\n        <div class=\"image-profile\" [class.outline]=\"selection\">\n          @if (!loadImageError) {\n            <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n          }\n        </div>\n      }\n      <ng-template [ngTemplateOutlet]=\"imageUploading\"></ng-template>\n      @if (!uploading) {\n        <div class=\"layer\" [class.readonly]=\"readonly\"></div>\n      }\n    </div>\n  } @else {\n    @if (!imageEntry.thumbUrl) {\n      <div class=\"image-loading cursor-pointer\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n      </div>\n    }\n    <ng-template [ngTemplateOutlet]=\"imageUploading\"></ng-template>\n  }\n</div>\n\n<ng-template #layoutToolbar>\n  <thy-actions thySize=\"xxs\">\n    @for (item of layoutOptions; track $index) {\n      @if (item.key !== 'split') {\n        <a\n          href=\"javascript:;\"\n          thyAction\n          [thyType]=\"item.key === 'remove' ? 'danger' : 'primary'\"\n          [thyActionIcon]=\"item.icon\"\n          [thyActionActive]=\"layoutActive(item.key)\"\n          [thyTooltip]=\"item.name\"\n          thyTooltipPlacement=\"top\"\n          (mousedown)=\"item?.handle($event, item.key)\"\n        ></a>\n      }\n      @if (item.key === 'split') {\n        <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n      }\n    }\n  </thy-actions>\n</ng-template>\n\n<ng-template #imageUploading>\n  @if (uploading) {\n    <div class=\"uploading\">\n      <div class=\"uploading-percentage\">\n        <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n        <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"> </thy-icon>\n      </div>\n    </div>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: ThyImageDirective, selector: "img[thyImage]", inputs: ["thySrc", "thyPreviewSrc", "thyOriginSrc", "thyImageMeta", "thyDisablePreview", "thyResolveSize"], exportAs: ["thyImage"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: ThyActions, selector: "thy-actions", inputs: ["thySize"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyProgress, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }] }); }
 }
@@ -14793,8 +14864,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                 args: [ThyImageDirective]
             }] } });
 
+const withFloating = (editor) => {
+    const { isFloating } = editor;
+    editor.isFloating = (element) => {
+        if (isFloatingElement(editor, element)) {
+            return true;
+        }
+        return isFloating(element);
+    };
+    return editor;
+};
+
 const withImage = (editor) => {
-    const { customInsertFragmentData, isVoid, renderElement, isBlockCard, mousedown } = editor;
+    const { customInsertFragmentData, isVoid, renderElement, isBlockCard, mousedown, getRoughHeight, isFloating } = editor;
     editor.isVoid = (element) => {
         return element.type === ElementKinds.image || isVoid(element);
     };
@@ -14844,7 +14926,13 @@ const withImage = (editor) => {
         }
         return isBlockCard(element);
     };
-    return editor;
+    editor.getRoughHeight = (element) => {
+        if (element.type === ElementKinds.image && isImageWithFloating(element)) {
+            return 0;
+        }
+        return getRoughHeight(element);
+    };
+    return withFloating(editor);
 };
 const createImagePlugin = (locale) => createPluginFactory({
     key: PluginKeys.image,
@@ -15398,10 +15486,6 @@ const createLinkPlugin = (locale) => createPluginFactory({
     }
 })();
 
-const getListTypes = () => {
-    return [ElementKinds.bulletedList, ElementKinds.numberedList];
-};
-
 const normalizeListItem = (editor, { nodeEntry }) => {
     const [listItemNode, listItemPath] = nodeEntry;
     const firstChildPath = listItemPath.concat([0]);