@plait/common 0.59.0 → 0.62.0-next.0

package/fesm2022/plait-common.mjs

@@ -1,9 +1,7 @@
-import { PlaitGroupElement, getSelectionAngle, getElementsInGroup, setAngleForG, RectangleClient, drawCircle, PlaitBoard, RESIZE_HANDLE_CLASS_NAME, createG, setStrokeLinecap, drawRectangle, SELECTION_RECTANGLE_CLASS_NAME, createForeignObject, updateForeignObject, ResizeCursorClass, RESIZE_CURSORS, setDragging, rotatePoints, isSelectionMoving, getSelectedElements, distanceBetweenPointAndPoint, Point, Direction, hotkeys, PlaitContextService, createDebugGenerator, Transforms, getHighestSelectedElements, getRectangleByElements, MERGING, PlaitPointerType, isMainPointer, toViewBoxPoint, toHostPoint, preventTouchMove, PRESS_AND_MOVE_BUFFER, isDragging, throttleRAF, handleTouchTarget, ACTIVE_STROKE_WIDTH, getRectangleByGroup, ElementFlavour, isSelectedElementOrGroup, Selection, getHitElementsBySelection, createGroupRectangleG, getSelectedGroups, getHighestSelectedGroups, getSelectedIsolatedElements, idCreator, getSelectedIsolatedElementsCanAddToGroup, getGroupByElement } from '@plait/core';
+import { PlaitGroupElement, getSelectionAngle, getElementsInGroup, setAngleForG, RectangleClient, drawCircle, PlaitBoard, RESIZE_HANDLE_CLASS_NAME, createG, setStrokeLinecap, drawRectangle, SELECTION_RECTANGLE_CLASS_NAME, ResizeCursorClass, RESIZE_CURSORS, setDragging, rotatePoints, isSelectionMoving, getSelectedElements, distanceBetweenPointAndPoint, Point, Direction, hotkeys, createDebugGenerator, createForeignObject, ACTIVE_STROKE_WIDTH, updateForeignObject, Transforms, getHighestSelectedElements, getRectangleByElements, MERGING, PlaitPointerType, isMainPointer, toViewBoxPoint, toHostPoint, preventTouchMove, PRESS_AND_MOVE_BUFFER, isDragging, throttleRAF, handleTouchTarget, getRectangleByGroup, ElementFlavour, isSelectedElementOrGroup, Selection, getHitElementsBySelection, createGroupRectangleG, getSelectedGroups, getHighestSelectedGroups, getSelectedIsolatedElements, idCreator, getSelectedIsolatedElementsCanAddToGroup, getGroupByElement, updateForeignObjectWidth, IS_TEXT_EDITABLE } from '@plait/core';
 import { isKeyHotkey } from 'is-hotkey';
-import { PlaitMarkEditor, MarkTypes, AlignEditor } from '@plait/text';
-import { Node, Transforms as Transforms$1, Editor } from 'slate';
-import * as i0 from '@angular/core';
-import { Directive, Input } from '@angular/core';
+import { Node, Operation, Transforms as Transforms$1, Range, Editor } from 'slate';
+import { fromEvent, timer } from 'rxjs';
 
 const BASE = 4;
 const PRIMARY_COLOR = '#6698FF';
@@ -13,6 +11,7 @@ const DEFAULT_ROUTE_MARGIN = 30;
 const TRANSPARENT = 'transparent';
 const ROTATE_HANDLE_DISTANCE_TO_ELEMENT = 20;
 const ROTATE_HANDLE_SIZE = 18;
+const DEFAULT_FONT_FAMILY = 'PingFangSC-Regular, "PingFang SC"';
 
 var MediaKeys;
 (function (MediaKeys) {
@@ -183,62 +182,6 @@ class ActiveGenerator extends Generator {
     }
 }
 
-class ImageGenerator extends Generator {
-    static { this.key = 'image-generator'; }
-    constructor(board, options) {
-        super(board, options);
-        this.board = board;
-        this.options = options;
-    }
-    canDraw(element, data) {
-        return !!this.options.getImageItem(element);
-    }
-    draw(element, viewContainerRef) {
-        const g = createG();
-        const foreignRectangle = this.options.getRectangle(element);
-        this.foreignObject = createForeignObject(foreignRectangle.x, foreignRectangle.y, foreignRectangle.width, foreignRectangle.height);
-        g.append(this.foreignObject);
-        const componentType = this.board.getPluginOptions(WithCommonPluginKey)
-            .imageComponentType;
-        if (!componentType) {
-            throw new Error('Not implement ImageBaseComponent error.');
-        }
-        this.componentRef = viewContainerRef.createComponent(componentType);
-        this.componentRef.instance.board = this.board;
-        this.componentRef.instance.imageItem = this.options.getImageItem(element);
-        this.componentRef.instance.element = element;
-        this.componentRef.instance.getRectangle = () => {
-            return this.options.getRectangle(element);
-        };
-        this.componentRef.instance.cdr.markForCheck();
-        this.foreignObject.append(this.componentRef.instance.nativeElement);
-        return g;
-    }
-    updateImage(nodeG, previous, current) {
-        if (previous !== current && this.componentRef) {
-            this.componentRef.instance.imageItem = this.options.getImageItem(current);
-            this.componentRef.instance.element = current;
-            this.componentRef.instance.getRectangle = () => {
-                return this.options.getRectangle(current);
-            };
-        }
-        const currentForeignObject = this.options.getRectangle(current);
-        updateForeignObject(this.g, currentForeignObject.width, currentForeignObject.height, currentForeignObject.x, currentForeignObject.y);
-        if (currentForeignObject && current.angle) {
-            setAngleForG(this.g, RectangleClient.getCenterPoint(currentForeignObject), current.angle);
-        }
-        // solve image lose on move node
-        if (this.foreignObject.children.length === 0) {
-            this.foreignObject.append(this.componentRef.instance.nativeElement);
-        }
-        this.componentRef?.instance.cdr.markForCheck();
-    }
-    destroy() {
-        super.destroy();
-        this.componentRef?.destroy();
-    }
-}
-
 const getResizeHandleByIndex = (index) => {
     return `${index}`;
 };
@@ -749,7 +692,7 @@ const getFirstTextManage = (element) => {
 };
 const getTextEditorsByElement = (element) => {
     return getTextManages(element).map(manage => {
-        return manage.componentRef.instance.editor;
+        return manage.editor;
     });
 };
 const getFirstTextEditor = (element) => {
@@ -770,20 +713,6 @@ const findFirstTextEditor = (board) => {
     });
     return firstEditor;
 };
-const getTextMarksByElement = (element) => {
-    const editors = getTextEditorsByElement(element);
-    const editor = editors[0];
-    if (!editor) {
-        return {};
-    }
-    if (editor.children.length === 0) {
-        const textManage = getTextManages(element)[0];
-        const currentMarks = PlaitMarkEditor.getMarksByElement(textManage.componentRef.instance.children[0]);
-        return currentMarks;
-    }
-    const currentMarks = PlaitMarkEditor.getMarks(editor);
-    return currentMarks;
-};
 const getElementsText = (elements) => {
     return elements
         .map(item => {
@@ -815,10 +744,10 @@ const getTextEditors = (board, elements) => {
         });
         const editingTextManage = textManages.find(textManage => textManage.isEditing);
         if (editingTextManage) {
-            return [editingTextManage.componentRef.instance.editor];
+            return [editingTextManage.editor];
         }
         return textManages.map(item => {
-            return item.componentRef.instance.editor;
+            return item.editor;
         });
     }
     return undefined;
@@ -831,10 +760,27 @@ const getEditingTextEditor = (board, elements) => {
     });
     const editingTextManage = textManages.find(textManage => textManage.isEditing);
     if (editingTextManage) {
-        return editingTextManage.componentRef.instance.editor;
+        return editingTextManage.editor;
     }
     return undefined;
 };
+const buildText = (text, align, properties) => {
+    properties = properties || {};
+    const plaitText = typeof text === 'string' ? { children: [{ text, ...properties }] } : text;
+    if (align) {
+        plaitText.align = align;
+    }
+    return plaitText;
+};
+const getLineHeightByFontSize = (fontSize) => {
+    if (fontSize === 14) {
+        return 20;
+    }
+    if (fontSize === 18) {
+        return 25;
+    }
+    return fontSize * 1.5;
+};
 const ELEMENT_TO_TEXT_MANAGES = new WeakMap();
 
 const selectImage = (board, defaultImageWidth, handle, acceptImageTypes = ['png', 'jpeg', 'gif', 'bmp']) => {
@@ -855,7 +801,7 @@ const buildImage = async (board, imageFile, defaultImageWidth, handle) => {
     });
     let imageItem = null;
     const url = URL.createObjectURL(imageFile);
-    const context = PlaitBoard.getComponent(board).viewContainerRef.injector.get(PlaitContextService);
+    const context = PlaitBoard.getBoardContext(board);
     context.setUploadingFile({ url, file: imageFile });
     imageItem = {
         url,
@@ -1280,6 +1226,98 @@ const removeRotating = (board) => {
     setDragging(board, false);
 };
 
+class ImageGenerator extends Generator {
+    static { this.key = 'image-generator'; }
+    constructor(board, options) {
+        super(board, options);
+        this.board = board;
+        this.options = options;
+        this.isFocus = false;
+    }
+    canDraw(element) {
+        return !!this.options.getImageItem(element);
+    }
+    draw(element) {
+        this.element = element;
+        const g = createG();
+        const foreignRectangle = this.options.getRectangle(element);
+        this.foreignObject = createForeignObject(foreignRectangle.x, foreignRectangle.y, foreignRectangle.width, foreignRectangle.height);
+        g.append(this.foreignObject);
+        const props = {
+            board: this.board,
+            imageItem: this.options.getImageItem(element),
+            element,
+            getRectangle: () => {
+                return this.options.getRectangle(element);
+            }
+        };
+        this.imageComponentRef = this.board.renderImage(this.foreignObject, props);
+        this.activeGenerator = new ActiveGenerator(this.board, {
+            getStrokeWidth: () => {
+                const selectedElements = getSelectedElements(this.board);
+                if (!(selectedElements.length === 1 && !isSelectionMoving(this.board))) {
+                    return ACTIVE_STROKE_WIDTH;
+                }
+                else {
+                    return ACTIVE_STROKE_WIDTH;
+                }
+            },
+            getStrokeOpacity: () => {
+                const selectedElements = getSelectedElements(this.board);
+                if ((selectedElements.length === 1 && !isSelectionMoving(this.board)) || !selectedElements.length) {
+                    return 1;
+                }
+                else {
+                    return 0.5;
+                }
+            },
+            getRectangle: () => {
+                return this.options.getRectangle(this.element);
+            },
+            hasResizeHandle: () => {
+                const isSelectedImageElement = canResize(this.board, this.element);
+                const isSelectedImage = !!getElementOfFocusedImage(this.board);
+                return isSelectedImage || isSelectedImageElement;
+            }
+        });
+        return g;
+    }
+    updateImage(nodeG, previous, current) {
+        this.element = current;
+        if (previous !== current && this.imageComponentRef) {
+            const props = {
+                imageItem: this.options.getImageItem(current),
+                element: current,
+                getRectangle: () => {
+                    return this.options.getRectangle(current);
+                }
+            };
+            this.imageComponentRef.update(props);
+        }
+        const currentForeignObject = this.options.getRectangle(current);
+        updateForeignObject(this.g, currentForeignObject.width, currentForeignObject.height, currentForeignObject.x, currentForeignObject.y);
+        if (currentForeignObject && current.angle) {
+            setAngleForG(this.g, RectangleClient.getCenterPoint(currentForeignObject), current.angle);
+        }
+        const activeG = PlaitBoard.getElementActiveHost(this.board);
+        this.activeGenerator.processDrawing(current, activeG, { selected: this.isFocus });
+    }
+    setFocus(element, isFocus) {
+        this.isFocus = isFocus;
+        const activeG = PlaitBoard.getElementActiveHost(this.board);
+        this.activeGenerator.processDrawing(element, activeG, { selected: isFocus });
+        const props = {
+            isFocus
+        };
+        this.imageComponentRef.update(props);
+    }
+    destroy() {
+        super.destroy();
+        this.imageComponentRef?.destroy();
+        this.activeGenerator?.destroy();
+    }
+}
+
 const setProperty = (board, properties, options) => {
     const selectedElements = getSelectedElements(board);
     selectedElements.forEach(element => {
@@ -1433,73 +1471,6 @@ const AlignTransform = {
     distributeVertical
 };
 
-const setTextMarks = (board, mark) => {
-    const selectedElements = getSelectedElements(board);
-    if (selectedElements.length) {
-        const firstEditor = findFirstTextEditor(board);
-        if (!firstEditor) {
-            return;
-        }
-        const activeMarks = PlaitMarkEditor.getMarks(firstEditor);
-        const elements = selectedElements.filter(element => {
-            const editors = getTextEditorsByElement(element);
-            return editors.some(editor => {
-                const elementMarks = PlaitMarkEditor.getMarks(editor);
-                return elementMarks[mark] === activeMarks[mark];
-            });
-        });
-        const editors = getTextEditors(board, elements);
-        if (editors && editors.length) {
-            editors.forEach(editor => {
-                PlaitMarkEditor.toggleMark(editor, mark);
-            });
-        }
-    }
-};
-const setFontSize = (board, size, defaultFontSize) => {
-    const editors = getTextEditors(board);
-    if (editors && editors.length) {
-        const selectedElements = getSelectedElements(board);
-        editors.forEach(editor => {
-            let finalDefaultFontSize;
-            if (typeof defaultFontSize === 'function') {
-                const element = selectedElements.find(element => {
-                    const textEditors = getTextEditorsByElement(element);
-                    return textEditors.includes(editor);
-                });
-                finalDefaultFontSize = defaultFontSize(element);
-            }
-            else {
-                finalDefaultFontSize = defaultFontSize;
-            }
-            PlaitMarkEditor.setFontSizeMark(editor, size, finalDefaultFontSize);
-        });
-    }
-};
-const setTextColor = (board, color, textSelection) => {
-    const editors = getTextEditors(board);
-    if (editors && editors.length) {
-        editors.forEach(editor => {
-            if (textSelection) {
-                Transforms$1.select(editor, textSelection);
-            }
-            if (color === 'transparent') {
-                Editor.removeMark(editor, MarkTypes.color);
-            }
-            else {
-                PlaitMarkEditor.setColorMark(editor, color);
-            }
-        });
-    }
-};
-const setTextAlign = (board, align) => {
-    const editors = getTextEditors(board);
-    if (editors && editors.length) {
-        editors.forEach(editor => AlignEditor.setAlign(editor, align));
-    }
-};
-const TextTransforms = { setTextAlign, setTextColor, setFontSize, setTextMarks };
-
 const normalizeShapePoints = (points, shift = false) => {
     let start = points[0];
     let end = points[1];
@@ -1547,8 +1518,6 @@ const withResize = (board, options) => {
                 options: resizeHitTestRef.options
             };
             preventTouchMove(board, event, true);
-            // prevent text from being selected when user pressed shift and pointer down
-            event.preventDefault();
             return;
         }
         pointerDown(event);
@@ -1560,8 +1529,6 @@ const withResize = (board, options) => {
             return;
         }
         if (startPoint && resizeHitTestRef && !isResizing(board)) {
-            // prevent text from being selected
-            event.preventDefault();
             const endPoint = [event.x, event.y];
             const distance = distanceBetweenPointAndPoint(startPoint[0], startPoint[1], endPoint[0], endPoint[1]);
             if (distance > PRESS_AND_MOVE_BUFFER) {
@@ -1711,7 +1678,7 @@ class GroupComponent extends CommonElementFlavour {
     initialize() {
         super.initialize();
         this.initializeGenerator();
-        const contextService = PlaitBoard.getViewContainerRef(this.board).injector.get(PlaitContextService);
+        const contextService = PlaitBoard.getBoardContext(this.board);
         this.onStableSubscription = contextService.onStable().subscribe(() => {
             const elementsInGroup = getElementsInGroup(this.board, this.element, false, true);
             const isPartialSelectGroup = elementsInGroup.some(item => isSelectedElementOrGroup(this.board, item)) &&
@@ -1919,94 +1886,246 @@ const updateSiblingElementGroupId = (board, removeGroups) => {
 };
 
 class ImageBaseComponent {
+    constructor() {
+        this.initialized = false;
+    }
     set imageItem(value) {
-        this.afterImageItemChange(this._imageItem, value);
         this._imageItem = value;
-        this.drawFocus();
+        if (this.initialized) {
+            this.afterImageItemChange(this._imageItem, value);
+        }
     }
     get imageItem() {
         return this._imageItem;
     }
     set isFocus(value) {
         this._isFocus = value;
-        this.drawFocus();
     }
     get isFocus() {
         return this._isFocus;
     }
-    get nativeElement() {
-        return this.elementRef.nativeElement;
+    initialize() {
+        this.initialized = true;
     }
-    constructor(elementRef, cdr) {
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.initialized = false;
+    destroy() {
     }
-    ngOnInit() {
-        this.activeGenerator = new ActiveGenerator(this.board, {
-            getStrokeWidth: () => {
-                const selectedElements = getSelectedElements(this.board);
-                if (!(selectedElements.length === 1 && !isSelectionMoving(this.board))) {
-                    return ACTIVE_STROKE_WIDTH;
-                }
-                else {
-                    return ACTIVE_STROKE_WIDTH;
-                }
-            },
-            getStrokeOpacity: () => {
-                const selectedElements = getSelectedElements(this.board);
-                if ((selectedElements.length === 1 && !isSelectionMoving(this.board)) || !selectedElements.length) {
-                    return 1;
+}
+
+function measureElement(element, options, containerMaxWidth = 10000) {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    const textEntries = Node.texts(element);
+    const lines = [[]];
+    for (const textEntry of textEntries) {
+        const [text] = textEntry;
+        const textString = Node.string(text);
+        const textArray = textString.split('\n');
+        textArray.forEach((segmentTextString, index) => {
+            const segmentText = { ...text, text: segmentTextString };
+            if (index === 0) {
+                const currentLine = lines[lines.length - 1];
+                currentLine.push(segmentText);
+            }
+            else {
+                const newLine = [];
+                newLine.push(segmentText);
+                lines.push(newLine);
+            }
+        });
+    }
+    let width = 0;
+    let height = 0;
+    lines.forEach((lineTexts, index) => {
+        let lineWidth = 0;
+        let maxLineHeight = getLineHeightByFontSize(options.fontSize);
+        lineTexts.forEach((text, index) => {
+            const font = getFont(text, { fontFamily: options.fontFamily, fontSize: options.fontSize });
+            ctx.font = font;
+            const textMetrics = ctx.measureText(text.text);
+            lineWidth += textMetrics.width;
+            const isLast = index === lineTexts.length - 1;
+            // skip when text is empty and is not last text of line
+            if (text['font-size'] && (isLast || text.text !== '')) {
+                const lineHeight = getLineHeightByFontSize(parseFloat(text['font-size']));
+                if (lineHeight > maxLineHeight) {
+                    maxLineHeight = lineHeight;
                 }
-                else {
-                    return 0.5;
+            }
+        });
+        if (lineWidth <= containerMaxWidth) {
+            if (lineWidth > width) {
+                width = lineWidth;
+            }
+            height += maxLineHeight;
+        }
+        else {
+            width = containerMaxWidth;
+            const lineWrapNumber = Math.ceil(lineWidth / containerMaxWidth);
+            height += maxLineHeight * lineWrapNumber;
+        }
+    });
+    return { width, height };
+}
+const getFont = (text, options) => {
+    return `${text.italic ? 'italic ' : ''} ${text.bold ? 'bold ' : ''} ${text['font-size'] || options.fontSize}px ${options.fontFamily} `;
+};
+
+class TextManage {
+    constructor(board, options) {
+        this.board = board;
+        this.options = options;
+        this.isEditing = false;
+        this.getSize = (element) => {
+            const computedStyle = window.getComputedStyle(this.foreignObject.children[0]);
+            const fontFamily = computedStyle.fontFamily;
+            const fontSize = parseFloat(computedStyle.fontSize);
+            const target = element || this.editor.children[0];
+            return measureElement(target, {
+                fontSize: fontSize,
+                fontFamily
+            }, this.options.getMaxWidth());
+        };
+        this.getText = () => {
+            return this.editor.children[0];
+        };
+        if (!this.options.getMaxWidth) {
+            this.options.getMaxWidth = () => 999;
+        }
+    }
+    draw(text) {
+        const _rectangle = this.options.getRectangle();
+        this.g = createG();
+        this.foreignObject = createForeignObject(_rectangle.x, _rectangle.y, _rectangle.width, _rectangle.height);
+        this.g.append(this.foreignObject);
+        this.g.classList.add('text');
+        const props = {
+            board: this.board,
+            text,
+            textPlugins: this.options.textPlugins,
+            onChange: (data) => {
+                if (data.operations.some(op => !Operation.isSelectionOperation(op))) {
+                    const { width, height } = this.getSize();
+                    this.options.onChange && this.options.onChange({ ...data, width, height });
+                    MERGING.set(this.board, true);
                 }
             },
-            getRectangle: () => {
-                return this.getRectangle();
+            afterInit: (editor) => {
+                this.editor = editor;
             },
-            hasResizeHandle: () => {
-                const isSelectedImageElement = canResize(this.board, this.element);
-                const isSelectedImage = !!getElementOfFocusedImage(this.board);
-                return isSelectedImage || isSelectedImageElement;
+            onComposition: (event) => {
+                const fakeRoot = buildCompositionData(this.editor, event.data);
+                if (fakeRoot) {
+                    const sizeData = this.getSize(fakeRoot.children[0]);
+                    this.options.onChange && this.options.onChange(sizeData);
+                    MERGING.set(this.board, true);
+                }
             }
-        });
-        this.initialized = true;
+        };
+        this.textComponentRef = this.board.renderText(this.foreignObject, props);
     }
-    drawFocus() {
-        if (this.initialized) {
-            const activeG = PlaitBoard.getElementActiveHost(this.board);
-            this.activeGenerator.processDrawing(this.element, activeG, { selected: this._isFocus });
-        }
+    updateRectangleWidth(width) {
+        updateForeignObjectWidth(this.g, width);
     }
-    ngOnDestroy() {
-        if (this.activeGenerator) {
-            this.activeGenerator.destroy();
-        }
+    updateAngle(centerPoint, angle = 0) {
+        setAngleForG(this.g, centerPoint, angle);
+    }
+    updateRectangle(rectangle) {
+        const { x, y, width, height } = rectangle || this.options.getRectangle();
+        updateForeignObject(this.g, width, height, x, y);
+    }
+    updateText(newText) {
+        const props = {
+            text: newText
+        };
+        this.textComponentRef.update(props);
+    }
+    edit(callback) {
+        this.isEditing = true;
+        IS_TEXT_EDITABLE.set(this.board, true);
+        const props = {
+            readonly: false
+        };
+        this.textComponentRef.update(props);
+        Transforms$1.select(this.editor, [0]);
+        const mousedown$ = fromEvent(document, 'mousedown').subscribe((event) => {
+            const point = toViewBoxPoint(this.board, toHostPoint(this.board, event.x, event.y));
+            const textRec = this.options.getRenderRectangle ? this.options.getRenderRectangle() : this.options.getRectangle();
+            const clickInText = RectangleClient.isHit(RectangleClient.getRectangleByPoints([point, point]), textRec);
+            const isAttached = event.target.closest('.plait-board-attached');
+            if (!clickInText && !isAttached) {
+                // handle composition input state, like: Chinese IME Composition Input
+                timer(0).subscribe(() => {
+                    exitCallback();
+                });
+            }
+        });
+        const keydown$ = fromEvent(document, 'keydown').subscribe((event) => {
+            if (event.isComposing) {
+                return;
+            }
+            if (event.key === 'Escape' || (event.key === 'Enter' && !event.shiftKey) || event.key === 'Tab') {
+                event.preventDefault();
+                event.stopPropagation();
+                exitCallback();
+                return;
+            }
+        });
+        const exitCallback = () => {
+            this.updateRectangle();
+            mousedown$.unsubscribe();
+            keydown$.unsubscribe();
+            IS_TEXT_EDITABLE.set(this.board, false);
+            MERGING.set(this.board, false);
+            callback && callback();
+            const props = {
+                readonly: true
+            };
+            this.textComponentRef.update(props);
+            this.isEditing = false;
+        };
+        return exitCallback;
+    }
+    destroy() {
+        this.g?.remove();
+        this.textComponentRef?.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImageBaseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: ImageBaseComponent, inputs: { element: "element", imageItem: "imageItem", board: "board", isFocus: "isFocus", getRectangle: "getRectangle", hasResizeHandle: "hasResizeHandle" }, host: { classAttribute: "plait-image-container" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImageBaseComponent, decorators: [{
-            type: Directive,
-            args: [{
-                    host: {
-                        class: 'plait-image-container'
-                    }
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { element: [{
-                type: Input
-            }], imageItem: [{
-                type: Input
-            }], board: [{
-                type: Input
-            }], isFocus: [{
-                type: Input
-            }], getRectangle: [{
-                type: Input
-            }], hasResizeHandle: [{
-                type: Input
-            }] } });
+const buildCompositionData = (editor, data) => {
+    if (editor.selection && Range.isCollapsed(editor.selection)) {
+        const [textNode, textPath] = Editor.node(editor, editor.selection);
+        const offset = editor.selection.anchor.offset;
+        const clonedElement = JSON.parse(JSON.stringify(editor.children[0]));
+        const root = { children: [clonedElement] };
+        const newTextString = textNode.text.slice(0, offset + 1) + data + textNode.text.slice(offset + 1);
+        const clonedTextNode = Node.get(root, textPath);
+        clonedTextNode.text = newTextString;
+        return root;
+    }
+    return null;
+};
+
+const withText = (board) => {
+    const newBoard = board;
+    newBoard.renderText = (container, props) => {
+        throw new Error('No implementation for renderText method.');
+    };
+    return newBoard;
+};
+
+var Alignment;
+(function (Alignment) {
+    Alignment["left"] = "left";
+    Alignment["center"] = "center";
+    Alignment["right"] = "right";
+})(Alignment || (Alignment = {}));
+
+const withImage = (board) => {
+    const newBoard = board;
+    newBoard.renderImage = (container, props) => {
+        throw new Error('No implementation for renderImage method.');
+    };
+    return newBoard;
+};
 
 /*
  * Public API Surface of utils
@@ -2016,5 +2135,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AStar, ActiveGenerator, AlignTransform, BASE, BoardCreationMode, CommonElementFlavour, DEFAULT_ROUTE_MARGIN, ELEMENT_TO_TEXT_MANAGES, Generator, IS_RESIZING, IS_ROTATING, ImageBaseComponent, ImageGenerator, MediaKeys, PICTURE_ACCEPTED_UPLOAD_SIZE, PRIMARY_COLOR, PlaitCommonElementRef, PointGraph, PointNode, PriorityQueue, PropertyTransforms, RESIZE_HANDLE_DIAMETER, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, ResizeHandle, TRANSPARENT, TextTransforms, WithCommonPluginKey, WithTextPluginKey, acceptImageTypes, addElementOfFocusedImage, addResizing, addRotating, alignBottom, alignHorizontalCenter, alignLeft, alignRight, alignTop, alignVerticalCenter, buildImage, calculatePolylineLength, canResize, createGraph, distributeHorizontal, distributeVertical, drawFillPrimaryHandle, drawHandle, drawPrimaryHandle, drawRotateHandle, findFirstTextEditor, generateElbowLineRoute, getCreationMode, getCrossingPointsBetweenPointAndSegment, getDirectionBetweenPointAndPoint, getDirectionByPointOfRectangle, getDirectionByVector, getDirectionFactor, getDirectionFactorByDirectionComponent, getEditingTextEditor, getElementOfFocusedImage, getElementsText, getExtendPoint, getFirstTextEditor, getFirstTextManage, getGraphPoints, getIndexByResizeHandle, getMemorizedLatest, getNextPoint, getOppositeDirection, getPointByVectorComponent, getPointByVectorDirectionComponent, getPointOnPolyline, getPoints, getRatioByPoint, getRectangleResizeHandleRefs, getResizeHandleByIndex, getResizeHandlePointByIndex, getRotatedResizeCursorClassByAngle, getSourceAndTargetOuterRectangle, getSymmetricHandleIndex, getTextEditors, getTextEditorsByElement, getTextManages, getTextMarksByElement, getUnitVectorByPointAndPoint, hasAfterDraw, isCornerHandle, isDelete, isDndMode, isDrawingMode, isEdgeHandle, isEnterHotkey, isExpandHotkey, isPointOnSegment, isResizing, isResizingByCondition, isRotating, isSourceAndTargetIntersect, isSpaceHotkey, isTabHotkey, isVirtualKey, memorizeLatest, normalizeShapePoints, reduceRouteMargin, removeDuplicatePoints, removeElementOfFocusedImage, removeResizing, removeRotating, resetPointsAfterResize, rotateVector, rotateVectorAnti90, routeAdjust, selectImage, setCreationMode, setProperty, simplifyOrthogonalPoints, withGroup, withResize };
+export { AStar, ActiveGenerator, AlignTransform, Alignment, BASE, BoardCreationMode, CommonElementFlavour, DEFAULT_FONT_FAMILY, DEFAULT_ROUTE_MARGIN, ELEMENT_TO_TEXT_MANAGES, Generator, GroupComponent, IS_RESIZING, IS_ROTATING, ImageBaseComponent, ImageGenerator, MediaKeys, PICTURE_ACCEPTED_UPLOAD_SIZE, PRIMARY_COLOR, PlaitCommonElementRef, PointGraph, PointNode, PriorityQueue, PropertyTransforms, RESIZE_HANDLE_DIAMETER, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, ResizeHandle, TRANSPARENT, TextManage, WithCommonPluginKey, WithTextPluginKey, acceptImageTypes, addElementOfFocusedImage, addResizing, addRotating, alignBottom, alignHorizontalCenter, alignLeft, alignRight, alignTop, alignVerticalCenter, buildCompositionData, buildImage, buildText, calculatePolylineLength, canResize, createGraph, distributeHorizontal, distributeVertical, drawFillPrimaryHandle, drawHandle, drawPrimaryHandle, drawRotateHandle, findFirstTextEditor, generateElbowLineRoute, getCreationMode, getCrossingPointsBetweenPointAndSegment, getDirectionBetweenPointAndPoint, getDirectionByPointOfRectangle, getDirectionByVector, getDirectionFactor, getDirectionFactorByDirectionComponent, getEditingTextEditor, getElementOfFocusedImage, getElementsText, getExtendPoint, getFirstTextEditor, getFirstTextManage, getGraphPoints, getIndexByResizeHandle, getLineHeightByFontSize, getMemorizedLatest, getNextPoint, getOppositeDirection, getPointByVectorComponent, getPointByVectorDirectionComponent, getPointOnPolyline, getPoints, getRatioByPoint, getRectangleResizeHandleRefs, getResizeHandleByIndex, getResizeHandlePointByIndex, getRotatedResizeCursorClassByAngle, getSourceAndTargetOuterRectangle, getSymmetricHandleIndex, getTextEditors, getTextEditorsByElement, getTextManages, getUnitVectorByPointAndPoint, hasAfterDraw, isCornerHandle, isDelete, isDndMode, isDrawingMode, isEdgeHandle, isEnterHotkey, isExpandHotkey, isPointOnSegment, isResizing, isResizingByCondition, isRotating, isSourceAndTargetIntersect, isSpaceHotkey, isTabHotkey, isVirtualKey, measureElement, memorizeLatest, normalizeShapePoints, reduceRouteMargin, removeDuplicatePoints, removeElementOfFocusedImage, removeResizing, removeRotating, resetPointsAfterResize, rotateVector, rotateVectorAnti90, routeAdjust, selectImage, setCreationMode, setProperty, simplifyOrthogonalPoints, withGroup, withImage, withResize, withText };
 //# sourceMappingURL=plait-common.mjs.map