@cloudea/yang-editor 1.0.0

package/dist/componets.js

@@ -0,0 +1,684 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentFactory = exports.EditorParagraph = exports.EditorParagraphMenu = exports.EditorCollapse = exports.EditorToolbar = exports.EditorContent = exports.EditorBody = void 0;
+class EditorBody {
+    element;
+    context;
+    content;
+    menuButton;
+    constructor(editor) {
+        this.element = document.createElement("div");
+        this.context = editor;
+        this.content = new EditorContent(this.context);
+        this.menuButton = new ContentBeforeMenu(this.context);
+    }
+    onMount() {
+        this.element.classList.add("yang-editor-body");
+        this.element.appendChild(this.content.onMount());
+        this.element.appendChild(this.menuButton.onMount());
+        this.element.style.height = this.context.options.height;
+        return this.element;
+    }
+    onMounted() {
+        throw new Error("Method not implemented.");
+    }
+    getElement() {
+        return this.element;
+    }
+}
+exports.EditorBody = EditorBody;
+class EditorContent {
+    element;
+    context;
+    constructor(editor) {
+        this.element = document.createElement("div");
+        this.context = editor;
+    }
+    onMount() {
+        this.element.classList.add("yang-editor-content");
+        if (this.context.options.mode === "edit") {
+            this.element.contentEditable = "true";
+        }
+        const observer = new MutationObserver((mutations) => {
+            if (this.context.options.events.onContentChange) {
+                this.context.options.events.onContentChange(this.element.innerHTML);
+            }
+            let childNodes = this.element.childNodes;
+            // transform text nodes or non-paragraph elements to paragraphs
+            for (let node of childNodes) {
+                if (node.nodeType === Node.TEXT_NODE) {
+                    let p = document.createElement("p");
+                    p.innerText = node.textContent || "";
+                    node.replaceWith(p);
+                }
+                else if (node.nodeType === Node.ELEMENT_NODE) {
+                    let nodeElem = node;
+                    let tag = nodeElem.tagName.toLowerCase();
+                    if (tag !== 'p' && tag !== 'div') {
+                        let p = document.createElement("p");
+                        p.innerHTML = nodeElem.outerHTML;
+                        node.replaceWith(p);
+                    }
+                }
+            }
+            // insert empty paragraph
+            let lastElement = this.element.children[this.element.children.length - 1];
+            if (lastElement === undefined || lastElement.childNodes.length > 0) {
+                this.insertDefaultParagraph();
+            }
+            // tag every childnodes
+            for (let node of this.element.children) {
+                if (node.nodeType === Node.ELEMENT_NODE) {
+                    let elem = node;
+                    if (!elem.classList.contains(ComponentFactory.PARAGRAPH_STYLE)) {
+                        elem.classList.add(ComponentFactory.PARAGRAPH_STYLE);
+                    }
+                }
+            }
+            // add mousemove and mouseleave event to every child nodes
+            for (let node of this.element.children) {
+                if (node.nodeType === Node.ELEMENT_NODE) {
+                    if (this.context.options.mode === "edit") {
+                        let elem = node;
+                        elem.onmousemove = () => {
+                            this.context.body.menuButton.show(elem);
+                        };
+                        elem.onmouseleave = () => {
+                            this.context.body.menuButton.hide();
+                        };
+                    }
+                }
+            }
+            // activate all components
+            for (let node of this.element.children) {
+                if (node.nodeType === Node.ELEMENT_NODE) {
+                    for (let className of node.classList) {
+                        if (ComponentFactory.STYLES.indexOf(className) !== -1) {
+                            this.context.componentFactory.createComponent(className, node).onMount();
+                            break;
+                        }
+                    }
+                }
+            }
+        });
+        // 开始观察
+        observer.observe(this.element, {
+            childList: true, // 观察直接子节点的变动
+            subtree: true, // 观察所有后代节点的变动
+            characterData: true, // 观察节点内容或文本的变动
+            attributes: false, // 观察属性的变动
+            // attributeFilter: ['style', 'class'] // 只观察特定属性
+        });
+        this.element.oncopy = (e) => {
+            // TODO: handle copy event
+            // e.preventDefault();
+            // let selection = window.getSelection();
+            // if (selection) {
+            //     let range = selection.getRangeAt(0);
+            //     let cloned = range.cloneContents();
+            //     // console.log(cloned);
+            //     // console.log(e.clipboardData)
+            //     // console.log(e.clipboardData?.getData("text/html"));
+            //     // e.clipboardData?.setData("text/html", cloned.innerHTML);
+            // }
+        };
+        this.element.onpaste = (e) => {
+            // TODO: handle paste event
+            //e.preventDefault();
+            // let clipboardData = e.clipboardData;
+            // if (clipboardData) {
+            //     let html = clipboardData.getData("text/html");
+            //     let text = clipboardData.getData("text/plain");
+            //     if (html) {
+            //         let div = document.createElement("div");
+            //         div.innerHTML = html;
+            //         this.element.appendChild(div);
+            //     } else if (text) {
+            //         this.element.appendChild(document.createTextNode(text));
+            //     }
+            // }
+        };
+        this.insertDefaultParagraph();
+        return this.element;
+    }
+    insertDefaultParagraph() {
+        this.element.appendChild(document.createElement('p'));
+    }
+    insertCollapse() {
+        let paragraphElement = this.context.selectionUtils.getSelectedParagraph();
+        if (paragraphElement?.innerText.trim() === "") {
+            paragraphElement.replaceWith(new EditorCollapse(this.context).onMount());
+        }
+        else {
+            for (let child of this.element.children) {
+                if (child === paragraphElement) {
+                    child.after(new EditorCollapse(this.context).onMount());
+                    break;
+                }
+            }
+        }
+    }
+    onMounted() {
+        throw new Error("Method not implemented.");
+    }
+    getElement() {
+        return this.element;
+    }
+}
+exports.EditorContent = EditorContent;
+class ContentBeforeMenu {
+    element;
+    context;
+    sideMenu;
+    target;
+    constructor(editor) {
+        this.context = editor;
+        this.element = document.createElement("div");
+        this.sideMenu = new EditorParagraphMenu(this.context);
+    }
+    onMount() {
+        this.element.classList.add("yang-editor-content-before-menu");
+        let button = document.createElement("button");
+        button.classList.add("yang-editor-content-before-menu-button");
+        button.style.backgroundImage = `url(${this.context.options.images.menu})`;
+        this.element.onclick = () => this.sideMenu.show(this.target);
+        this.element.onmouseenter = () => this.show(this.target);
+        this.element.appendChild(button);
+        this.element.appendChild(this.sideMenu.onMount());
+        return this.element;
+    }
+    onMounted() {
+        throw new Error("Method not implemented.");
+    }
+    getElement() {
+        return this.element;
+    }
+    show(target) {
+        this.element.style.display = "flex";
+        if (target !== this.target) {
+            this.sideMenu.hide();
+        }
+        if (target) {
+            this.target = target;
+            this.element.style.left = `24px`;
+            this.element.style.top = target.offsetTop + `px`;
+        }
+    }
+    hide() {
+        this.element.style.display = "none";
+    }
+}
+class ButtonAdd {
+    element;
+    context;
+    constructor(editor) {
+        this.context = editor;
+        this.element = document.createElement("button");
+        this.element.innerText = "";
+        this.element.style.width = "16px";
+        this.element.style.height = "16px";
+        this.element.style.height = "16px";
+        this.element.style.backgroundImage = `url(${this.context.options.images.add})`;
+        this.element.style.backgroundSize = "contain";
+        this.element.style.backgroundRepeat = "no-repeat";
+        this.element.style.cursor = "pointer";
+        this.element.title = "Add Collapsed Panel";
+        this.element.onclick = () => this.context.body.content.insertCollapse();
+    }
+    onMount() {
+        return this.element;
+    }
+    onMounted() {
+        throw new Error("Method not implemented.");
+    }
+    getElement() {
+        return this.element;
+    }
+}
+class BackGroundColorStrip {
+    element;
+    context;
+    colors;
+    titles;
+    constructor(editor) {
+        this.context = editor;
+        this.element = document.createElement("div");
+        this.colors = ["rgba(228, 73, 91, 1)", "rgba(255, 140, 0, 1)", "rgba(255, 215, 0, 1)", "rgba(34, 139, 34, 1)", "rgba(30, 144, 255, 1)", "rgba(138, 43, 226, 1)", "rgba(255, 20, 147, 1)"];
+        this.titles = ["red", "orange", "yellow", "green", "blue", "purple", "pink"];
+    }
+    onMount() {
+        this.element.classList.add("yang-editor-color-strip");
+        this.element.style.display = "flex";
+        this.element.style.alignItems = "center";
+        for (let i = 0; i < this.colors.length; i++) {
+            let color = this.colors[i];
+            let title = this.titles[i];
+            let btn = document.createElement("button");
+            if (color != undefined && title != undefined) {
+                btn.style.backgroundColor = color;
+                btn.style.width = "16px";
+                btn.style.height = "16px";
+                btn.style.borderRadius = "2px";
+                btn.style.cursor = "pointer";
+                btn.title = title;
+                btn.onclick = () => {
+                    document.execCommand('backColor', false, color);
+                    this.context.selectionUtils.getSelectionRange()?.collapse();
+                    // eqauls to: 
+                    // document.execCommand('styleWithCSS', false, true);
+                    // document.execCommand('foreColor', false, this.value);
+                };
+            }
+            this.element.appendChild(btn);
+        }
+        return this.element;
+    }
+    onMounted() {
+        throw new Error("Method not implemented.");
+    }
+    getElement() {
+        return this.element;
+    }
+}
+class ForeGroundColorStrip {
+    element;
+    context;
+    colors;
+    titles;
+    constructor(editor) {
+        this.context = editor;
+        this.element = document.createElement("div");
+        this.colors = ["rgba(228, 73, 91, 1)", "rgba(255, 140, 0, 1)", "rgba(255, 215, 0, 1)", "rgba(34, 139, 34, 1)", "rgba(30, 144, 255, 1)", "rgba(138, 43, 226, 1)", "rgba(255, 20, 147, 1)"];
+        this.titles = ["red", "orange", "yellow", "green", "blue", "purple", "pink"];
+    }
+    onMount() {
+        this.element.classList.add("yang-editor-fgcolor-strip");
+        this.element.style.display = "flex";
+        this.element.style.alignItems = "center";
+        for (let i = 0; i < this.colors.length; i++) {
+            let color = this.colors[i];
+            let title = this.titles[i];
+            let btn = document.createElement("button");
+            if (color != undefined && title != undefined) {
+                // btn.style.backgroundColor = "transparent";
+                // btn.style.backgroundImage = `url(${this.context.options.images.fgColor})`;
+                // btn.style.backgroundSize = "16px 16px";
+                // btn.style.backgroundRepeat = "no-repeat";
+                // btn.style.backgroundPosition = "center";
+                btn.style.mask = `url(${this.context.options.images.fgColor}) no-repeat center`;
+                btn.style.webkitMask = `url(${this.context.options.images.fgColor}) no-repeat center`;
+                btn.style.backgroundColor = color;
+                btn.style.width = "17px";
+                btn.style.height = "17px";
+                btn.style.borderRadius = "2px";
+                btn.style.cursor = "pointer";
+                btn.title = title;
+                btn.onclick = () => {
+                    document.execCommand('foreColor', false, color);
+                    this.context.selectionUtils.getSelectionRange()?.collapse();
+                };
+            }
+            this.element.appendChild(btn);
+        }
+        return this.element;
+    }
+    onMounted() {
+        throw new Error("Method not implemented.");
+    }
+    getElement() {
+        return this.element;
+    }
+}
+class IconButton {
+    element;
+    context;
+    constructor(editor, icon, tooltip, onclick) {
+        this.context = editor;
+        this.element = document.createElement("button");
+        this.element.classList.add("yang-editor-icon-button");
+        this.element.style.backgroundImage = `url(${icon})`;
+        this.element.style.backgroundColor = "transparent";
+        this.element.style.width = "26px";
+        this.element.style.height = "26px";
+        this.element.style.borderRadius = "3px";
+        this.element.style.cursor = "pointer";
+        this.element.style.backgroundSize = "16px 16px";
+        this.element.style.backgroundRepeat = "no-repeat";
+        this.element.style.backgroundPosition = "center center";
+        this.element.title = tooltip;
+        this.element.onclick = () => {
+            if (onclick) {
+                onclick();
+            }
+        };
+        this.element.onmouseover = () => {
+            this.element.style.backgroundColor = "rgba(231, 233, 232, 1)";
+        };
+        this.element.onmouseleave = () => {
+            this.element.style.backgroundColor = "transparent";
+        };
+    }
+    onMount() {
+        return this.element;
+    }
+    onMounted() {
+        throw new Error("Method not implemented.");
+    }
+    getElement() {
+        return this.element;
+    }
+}
+class EditorToolbar {
+    element;
+    context;
+    constructor(editor) {
+        this.context = editor;
+        this.element = document.createElement("div");
+    }
+    onMount() {
+        this.element.classList.add("yang-editor-toolbar");
+        this.element.appendChild(new ButtonAdd(this.context).onMount());
+        this.element.appendChild(new BackGroundColorStrip(this.context).onMount());
+        this.element.appendChild(new ForeGroundColorStrip(this.context).onMount());
+        this.element.appendChild(new IconButton(this.context, this.context.options.images.bold, "Bold", this.boldSelection.bind(this)).onMount());
+        this.element.appendChild(new IconButton(this.context, this.context.options.images.italic, "Italic", this.italicSelection.bind(this)).onMount());
+        this.element.appendChild(new IconButton(this.context, this.context.options.images.underline, "Underline", this.underlineSelection.bind(this)).onMount());
+        this.element.appendChild(new IconButton(this.context, this.context.options.images.deleteline, "Delete Line", this.strokeThroughSelection.bind(this)).onMount());
+        this.element.appendChild(new IconButton(this.context, this.context.options.images.link, "Link", this.insertLink.bind(this)).onMount());
+        this.element.appendChild(new IconButton(this.context, this.context.options.images.clear, "Clear", this.clearFormatSelection.bind(this)).onMount());
+        return this.element;
+    }
+    onMounted() {
+        throw new Error("Method not implemented.");
+    }
+    getElement() {
+        return this.element;
+    }
+    insertLink() {
+        let range = this.context.selectionUtils.getSelectionRange();
+        if (range == null || range.collapsed) {
+            return;
+        }
+        const url = prompt("请输入链接地址");
+        if (url) {
+            const selectedContent = range.extractContents();
+            const linkElement = document.createElement('a');
+            linkElement.href = url;
+            linkElement.appendChild(selectedContent);
+            range.insertNode(linkElement);
+        }
+    }
+    boldSelection() {
+        // let range = this.context.selectionUtils.getSelectionRange();
+        // if (range == null || range.collapsed) {return;}
+        // // 检查是否已经在加粗标签内
+        // let parentElement = range.commonAncestorContainer;
+        // while (parentElement && parentElement.nodeType !== Node.ELEMENT_NODE && parentElement.parentElement !== null) {
+        //     parentElement = parentElement.parentElement;
+        // }
+        // let tagName = parentElement.nodeName.toUpperCase();
+        // if (parentElement && (tagName === 'STRONG' || tagName === 'B')) {
+        //     // 如果已经在加粗标签内，则取消加粗
+        //     if(parentElement.textContent != null && parentElement.parentNode !== null) {
+        //         const textNode = document.createTextNode(parentElement.textContent);
+        //         parentElement.parentNode.replaceChild(textNode, parentElement);
+        //     }
+        // } else {
+        //     // 执行加粗
+        //     //document.execCommand('bold', false);
+        //     const selectedContent = range.extractContents();
+        //     // 创建加粗元素并包裹选中内容
+        //     const boldElement = document.createElement('strong');
+        //     boldElement.appendChild(selectedContent);
+        //     // 将加粗的内容插入回文档
+        //     range.insertNode(boldElement);
+        // }
+        document.execCommand('bold', false, undefined);
+    }
+    italicSelection() {
+        document.execCommand('italic', false, undefined);
+    }
+    underlineSelection() {
+        document.execCommand('underline', false, undefined);
+    }
+    strokeThroughSelection() {
+        document.execCommand('strikeThrough', false, undefined);
+    }
+    clearFormatSelection() {
+        document.execCommand('removeFormat', false, undefined);
+        document.execCommand('unlink', false, undefined);
+    }
+}
+exports.EditorToolbar = EditorToolbar;
+class EditorCollapse {
+    static COLLAPSE_STYLE = "collapsed";
+    element;
+    context;
+    title;
+    header;
+    button;
+    body;
+    container;
+    constructor(editor, element) {
+        this.context = editor;
+        if (element) {
+            this.element = element;
+            this.container = element.querySelector('.yang-editor-collapse-container');
+            this.header = element.querySelector('.yang-editor-collapse-header');
+            this.body = element.querySelector('.yang-editor-collapse-body');
+            this.button = element.querySelector('.yang-editor-collapse-button');
+            this.title = element.querySelector('.yang-editor-collapse-title');
+        }
+        else {
+            this.element = document.createElement("div");
+            this.container = document.createElement('div');
+            this.header = document.createElement('div');
+            this.body = document.createElement('div');
+            this.button = document.createElement('button');
+            this.title = document.createElement('div');
+            this.element.classList.add(ComponentFactory.COLLAPSE_STYLE);
+            this.container.classList.add("yang-editor-collapse-container");
+            this.header.classList.add("yang-editor-collapse-header");
+            this.body.classList.add("yang-editor-collapse-body");
+            this.button.classList.add("yang-editor-collapse-button");
+            this.title.classList.add("yang-editor-collapse-title");
+            this.title.innerText = "折叠面板标题";
+            this.button.innerText = "";
+            this.header.appendChild(this.button);
+            this.header.appendChild(this.title);
+            this.container.appendChild(this.header);
+            this.container.appendChild(this.body);
+            this.element.appendChild(this.container);
+            this.container.contentEditable = "false";
+            this.button.style.backgroundImage = `url(${this.context.options.images.down})`;
+        }
+    }
+    getElement() {
+        return this.element;
+    }
+    onMount() {
+        if (this.context.options.mode === "edit") {
+            this.title.contentEditable = "true";
+            this.body.contentEditable = "true";
+        }
+        else {
+            this.title.contentEditable = "false";
+            this.body.contentEditable = "false";
+        }
+        this.button.onclick = () => {
+            this.switchState();
+            this.renderState();
+        };
+        this.renderState();
+        return this.getElement();
+    }
+    switchState() {
+        if (this.element.classList.contains(EditorCollapse.COLLAPSE_STYLE)) {
+            this.element.classList.remove(EditorCollapse.COLLAPSE_STYLE);
+        }
+        else {
+            this.element.classList.add(EditorCollapse.COLLAPSE_STYLE);
+        }
+    }
+    isCollapsed() {
+        return this.element.classList.contains(EditorCollapse.COLLAPSE_STYLE);
+    }
+    renderState() {
+        if (this.isCollapsed()) {
+            this.button.classList.add(EditorCollapse.COLLAPSE_STYLE);
+            this.body.classList.add(EditorCollapse.COLLAPSE_STYLE);
+            this.header.classList.add(EditorCollapse.COLLAPSE_STYLE);
+        }
+        else {
+            this.button.classList.remove(EditorCollapse.COLLAPSE_STYLE);
+            this.body.classList.remove(EditorCollapse.COLLAPSE_STYLE);
+            this.header.classList.remove(EditorCollapse.COLLAPSE_STYLE);
+        }
+    }
+    onMounted() {
+        throw new Error("Method not implemented.");
+    }
+}
+exports.EditorCollapse = EditorCollapse;
+class EditorParagraphMenu {
+    element;
+    context;
+    target;
+    constructor(editor) {
+        this.context = editor;
+        this.element = document.createElement("div");
+    }
+    onMounted() {
+        throw new Error("Method not implemented.");
+    }
+    getElement() {
+        return this.element;
+    }
+    onMount() {
+        this.element.classList.add("yang-editor-paragraph-menu");
+        let ul = document.createElement("ul");
+        let lis = new Array();
+        let images = [this.context.options.images.delete, this.context.options.images.copy, this.context.options.images.cut];
+        let texts = ["Delete", "Copy", "Cut"];
+        for (let i = 0; i < images.length; i++) {
+            let li = document.createElement("li");
+            let icon = document.createElement("button");
+            let text = document.createElement("p");
+            li.classList.add("yang-editor-paragraph-menu-item");
+            icon.classList.add("yang-editor-paragraph-menu-item-icon");
+            text.classList.add("yang-editor-paragraph-menu-item-text");
+            let title = texts[i];
+            if (title !== undefined) {
+                icon.style.backgroundImage = `url(${images[i]})`;
+                icon.style.backgroundSize = "16px 16px";
+                icon.style.backgroundRepeat = "no-repeat";
+                icon.style.backgroundPosition = "center";
+                icon.style.width = "20px";
+                icon.style.height = "20px";
+                icon.style.cursor = "pointer";
+                icon.style.border = "none";
+                icon.style.outline = "none";
+                li.style.display = "flex";
+                li.style.alignItems = "center";
+                text.innerText = title;
+                li.appendChild(icon);
+                li.appendChild(text);
+            }
+            ul.appendChild(li);
+            lis.push(li);
+        }
+        if (lis[0]) {
+            lis[0].onclick = this.delete.bind(this);
+        }
+        if (lis[1]) {
+            lis[1].onclick = this.copy.bind(this);
+        }
+        if (lis[2]) {
+            lis[2].onclick = this.cut.bind(this);
+        }
+        this.element.onmouseleave = this.hide.bind(this);
+        this.element.appendChild(ul);
+        return this.getElement();
+    }
+    hide() {
+        this.element.style.display = "none";
+    }
+    show(target) {
+        this.element.style.display = "block";
+        if (target) {
+            this.target = target;
+        }
+    }
+    delete(ev) {
+        if (this.target !== undefined) {
+            this.target.remove();
+            this.hide();
+            ev.stopPropagation();
+        }
+    }
+    copy(ev) {
+        if (this.target !== undefined) {
+            navigator.clipboard.write([new ClipboardItem({
+                    "text/html": this.target.outerHTML
+                })]).then(() => {
+                this.hide();
+            });
+        }
+    }
+    cut(ev) {
+        if (this.target !== undefined) {
+            navigator.clipboard.write([new ClipboardItem({
+                    "text/html": this.target.outerHTML
+                })]).then(() => {
+                this.target?.remove();
+                this.hide();
+            });
+        }
+    }
+}
+exports.EditorParagraphMenu = EditorParagraphMenu;
+class EditorParagraph {
+    context;
+    element;
+    constructor(context, element) {
+        this.context = context;
+        if (element !== undefined) {
+            this.element = element;
+        }
+        else {
+            this.element = document.createElement("p");
+            this.element.classList.add(ComponentFactory.PARAGRAPH_STYLE);
+        }
+    }
+    onMounted() {
+        throw new Error("Method not implemented.");
+    }
+    onMount() {
+        return this.element;
+    }
+    getElement() {
+        return this.element;
+    }
+}
+exports.EditorParagraph = EditorParagraph;
+class ComponentFactory {
+    static PARAGRAPH_STYLE = "yang-editor-paragraph";
+    static COLLAPSE_STYLE = "yang-editor-collapse";
+    static STYLES = [this.PARAGRAPH_STYLE, this.COLLAPSE_STYLE];
+    context;
+    constructor(context) {
+        this.context = context;
+    }
+    createComponent(typeClassName, element) {
+        switch (typeClassName) {
+            case ComponentFactory.PARAGRAPH_STYLE:
+                return new EditorParagraph(this.context, element);
+            case ComponentFactory.COLLAPSE_STYLE:
+                return new EditorCollapse(this.context, element);
+            default:
+                throw new Error(`Unknown component type: ${typeClassName}`);
+        }
+    }
+}
+exports.ComponentFactory = ComponentFactory;
+//# sourceMappingURL=componets.js.map