@cloudea/yang-editor 1.0.0

package/src/context.ts

@@ -0,0 +1,4 @@
+import EventCenter from "./event";
+
+export const globalEventCenter = new EventCenter();
+

package/src/event.ts

@@ -0,0 +1,52 @@
+
+export interface Event<T> {
+    name: string
+    payload : T
+}
+
+export type EventListener<T> =  (event: Event<T>) => void;
+
+export default class EventCenter {
+
+    private listeners : Map<string, Array<EventListener<any>>>;
+
+    constructor() {
+        this.listeners = new Map<string, Array<EventListener<any>>>();
+    }
+
+    on<T>(event: string, callback: EventListener<T>) {
+        if (!this.listeners.has(event)) {
+            this.listeners.set(event, new Array<EventListener<T>>());
+        }
+        let callbacks = this.listeners.get(event);
+        let idx = callbacks?.indexOf(callback);
+        if (idx === -1) {
+            this.listeners.get(event)?.push(callback)
+        }
+    }
+
+    emit<T>(event: string, data : T) {
+        if (this.listeners.has(event)){
+            let callbacks =  this.listeners.get(event);
+            if (callbacks !== undefined) {
+                for(let callback of callbacks){
+                    callback({
+                        name: event,
+                        payload: data
+                    })
+                }
+            }
+        }
+    }
+
+    off<T>(event: string, callback: EventListener<T>) {
+        if (this.listeners.has(event) ) {
+            let callbacks = this.listeners.get(event);
+            let idx = callbacks?.indexOf(callback);
+            if (idx !== undefined && idx >= 0){
+                callbacks?.splice(idx, 1)
+            }
+        }
+    }
+
+}

package/src/index.ts

@@ -0,0 +1,85 @@
+import {ComponentFactory, EditorBody, EditorComponent, EditorContent, EditorParagraph, EditorParagraphMenu, EditorToolbar} from "./componets";
+import { SelectionUtils } from "./utils";
+
+export type YangEditorMode = "edit" | "readonly";
+
+export interface YangEditorOptions {
+    elem: string;
+    width: string;
+    height: string;
+    mode: YangEditorMode;
+    images: {
+        add: string,
+        menu: string,
+        bold: string,
+        italic: string,
+        underline: string,
+        deleteline: string,
+        link: string,
+        clear: string,
+        down: string,
+        delete: string,
+        copy: string,
+        cut: string,
+        fgColor: string
+    },
+    events: {
+        onContentChange?: (html: string) => void,
+    }
+}
+
+export class YangEditor {
+
+    public readonly element: HTMLElement;
+    public readonly toolbar: EditorToolbar;
+    public readonly body: EditorBody;
+    public readonly selectionUtils: SelectionUtils;
+    public readonly componentFactory: ComponentFactory;
+
+    private components: Array<EditorComponent> = new Array<EditorComponent>();
+
+    constructor(public options: YangEditorOptions) {
+        let element = document.getElementById(options.elem);
+        if(element === null ) {
+            throw new Error(`Invalid Yang Editor option "${options.elem}"`);
+        }
+        this.element = element;
+        this.toolbar = new EditorToolbar(this);
+        this.body = new EditorBody(this);
+        this.selectionUtils = new SelectionUtils(this.element);
+        this.componentFactory = new ComponentFactory(this);
+    }
+
+    render() {
+        // clear elements
+        this.element.classList.add("yang-editor");
+        this.element.style.width = this.options.width;
+        this.element.innerHTML = "";
+        // add components
+        if (this.options.mode === "edit") {
+            this.element.appendChild(this.toolbar.onMount());
+        }
+        this.element.appendChild(this.body.onMount());
+    }
+
+    setHTMLContent(html: string) {
+        this.body.content.getElement().innerHTML = html;
+    }
+
+    getHTMLContent(): string {
+        return this.body.content.getElement().innerHTML;
+    }
+}
+
+function create(options: YangEditorOptions): YangEditor {
+     let yangEditor = new YangEditor(options);
+     yangEditor.render();
+     return yangEditor;
+}
+
+const YangEditorFacade =  {
+    create,
+}
+
+export default YangEditorFacade;
+

package/src/style.css

@@ -0,0 +1,247 @@
+.yang-editor {
+    background: white;
+    border: 1px solid rgba(235, 235, 235, 1);
+    padding: 0;
+    text-align: left;
+    position: relative;
+}
+
+.yang-editor p,
+.yang-editor div,
+.yang-editor button,
+.yang-editor ul,
+.yang-editor li {
+    margin: 0;
+    padding: 0;
+    border: none;
+    outline: none;
+    box-sizing: border-box;
+    display: block;
+    list-style: none;
+}
+
+.yang-editor .yang-editor-body {
+    position: relative;
+    padding: 4px;
+    outline: none;
+    overflow: auto;
+}
+
+.yang-editor .yang-editor-content {
+    background: white;
+    height: 100%;
+    min-height: 100px;
+}
+
+.yang-editor .yang-editor-toolbar {
+    background: transparent;
+    line-height: 24px;
+    user-select: none;
+    padding: 8px 16px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid rgba(235, 235, 235, 1);
+}
+
+.yang-editor .yang-editor-toolbar-button {
+    padding: 2px;
+    vertical-align: middle;
+    cursor: pointer;
+}
+
+.yang-editor .yang-editor-content > p,
+.yang-editor .yang-editor-content > div {
+    border-left: 44px solid transparent;
+    border-right: 44px solid transparent;
+    padding: 4px;
+    position: relative;
+    min-height: 31px;
+}
+
+.yang-editor .yang-editor-content > p:hover,
+.yang-editor .yang-editor-content > div:hover {
+    border-left: 44px solid transparent;
+    border-radius: 4px;
+}
+
+
+
+.yang-editor .yang-editor-content:focus {
+    /* background-color: red !important; */
+}
+
+
+.yang-editor .yang-editor-color-strip {
+    padding-left: 19px;
+}
+
+.yang-editor .yang-editor-color-strip button {
+    margin-left: 8px;
+}
+
+.yang-editor .yang-editor-color-strip button:first-child {
+    margin-left: 0;
+}
+
+.yang-editor .yang-editor-fgcolor-strip {
+    padding-left: 8px;
+}
+
+.yang-editor .yang-editor-fgcolor-strip button {
+    margin-left: 8px;
+}
+
+.yang-editor .yang-editor-fgcolor-strip button:first-child {
+    margin-left: 0;
+}
+
+.yang-editor .yang-editor-icon-button {
+    margin-left: 4px;
+}
+
+.yang-editor .yang-editor-icon-button:nth-of-type(2){
+    margin-left: 16px;
+}
+
+.yang-editor .yang-editor-collapse-container {
+    border: 1px solid rgba(235, 235, 235, 1);
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.yang-editor .yang-editor-collapse-container:hover {
+    border: 1px solid #81bbf8 !important;
+}
+
+.yang-editor .yang-editor-collapse-header { 
+    border-bottom: 1px solid rgba(235, 235, 235, 1);
+    display: flex;
+    align-items: center;
+    padding: 8px 10px;
+}
+
+.yang-editor .yang-editor-collapse-header.collapsed {
+    border-bottom: 0px solid transparent;
+}
+
+.yang-editor .yang-editor-collapse-title {
+    font-size: 15px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 21px;
+    color: rgba(0, 0, 0, 1);
+    text-align: left;
+    padding: 0 10px;
+    flex-shrink: 1;
+    flex-grow: 1;
+}
+
+.yang-editor .yang-editor-collapse-body {
+    padding: 12px 16px;
+    min-height: 64px;
+}
+
+.yang-editor .yang-editor-collapse-body.collapsed {
+    height: 0px;
+    min-height: 0px;
+    overflow: hidden;
+    padding: 0 0;
+}
+
+.yang-editor .yang-editor-collapse-button {
+    background-color: transparent;
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    background-size: 16px 16px;
+    background-repeat: no-repeat;
+    background-position: center;
+    cursor: pointer;
+    border-radius: 3px;
+}
+
+.yang-editor .yang-editor-collapse-button:hover {
+    background-color: rgba(231, 233, 232, 1) !important;
+}
+
+.yang-editor .yang-editor-collapse-button.collapsed {
+    transform: rotate(-90deg);
+}
+
+.yang-editor a,
+.yang-editor a:hover,
+.yang-editor a:active,
+.yang-editor a:visited {
+    color: rgba(17, 124, 238, 1);
+    cursor: pointer;
+    text-decoration: none;
+}
+.yang-editor a:hover {
+    background-color: #5FA8F633;
+}
+
+
+
+.yang-editor .yang-editor-paragraph-menu {
+    width: 180px;
+    padding: 4px 8px;
+    opacity: 1;
+    background: rgba(255, 255, 255, 1);
+    border: 1px solid rgba(217, 217, 217, 1);
+    box-shadow: 1px 1px 5px  rgba(217, 217, 217, 0.3);
+    border-radius: 6px;
+    position: absolute;
+    left: 0;
+    top: 31px;
+    display: none;
+}
+
+.yang-editor .yang-editor-paragraph-menu-item {
+    border-radius: 6px;
+    cursor: pointer;
+    padding: 8px;
+}
+
+.yang-editor .yang-editor-paragraph-menu-item:hover {
+    background: rgba(239, 240, 240, 1);
+}
+
+.yang-editor .yang-editor-paragraph-menu-item-icon {
+    flex-shrink: 0;
+    background: transparent;
+    margin-right: 8px;
+}
+
+.yang-editor .yang-editor-paragraph-menu-item-text {
+    flex-shrink: 1;
+    flex-grow: 1;
+}
+
+.yang-editor .yang-editor-content-before-menu {
+    position: absolute;
+    width: 24px;
+    height: 31px;
+    left: 24px;
+    top: 0px;
+    display: none;
+    align-items: center;
+    justify-content: center;
+}
+
+.yang-editor .yang-editor-content-before-menu-button{ 
+    width: 24px;
+    height: 24px;
+    /* display: none; */
+    background-color: transparent;
+    background-size: 16px 16px;
+    background-position: center;
+    background-repeat: no-repeat;
+    display: block;
+    cursor: pointer;
+}
+
+.yang-editor .yang-editor-content-before-menu-button:hover { 
+    background-color: #eff0f0;
+    border-radius: 6px;
+}
+

package/src/utils.ts

@@ -0,0 +1,38 @@
+import { ComponentFactory } from "./componets";
+
+export class SelectionUtils {
+
+    private element: HTMLElement;
+
+    constructor(element: HTMLElement) {
+        this.element = element;
+    }
+
+    public getSelectedParagraph(): HTMLElement | null {
+        let range = this.getSelectionRange();
+        if(range) {
+            let node = range.startContainer;
+            while(node && node !== this.element) {
+                if(node.nodeType === Node.ELEMENT_NODE) {
+                    let elem = node as HTMLElement;
+                    if(elem.classList.contains(ComponentFactory.PARAGRAPH_STYLE)) {
+                        return elem;
+                    }
+                }
+                node = node.parentNode as Node;
+            }
+        }
+        return null;
+    }
+
+    public getSelectionRange(): Range | null {
+        let selection = window.getSelection();
+        if(selection && selection.rangeCount > 0) {
+            let range = selection.getRangeAt(0);
+            if(this.element.contains(range.commonAncestorContainer)) {
+                return range;
+            }
+        }
+        return null;
+    }
+}

package/tsconfig.json

@@ -0,0 +1,47 @@
+{
+  // Visit https://aka.ms/tsconfig to read more about this file
+  "compilerOptions": {
+    // File Layout
+     "rootDir": "./src",
+     "outDir": "./dist",
+
+    // Environment Settings
+    // See also https://aka.ms/tsconfig/module
+    "module": "nodenext",
+    "target": "esnext",
+    "types": [],
+    // For nodejs:
+     "lib": ["esnext", "dom", "dom.iterable"],
+    // "types": ["node"],
+    // and npm install -D @types/node
+
+    // Other Outputs
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+
+    // Stricter Typechecking Options
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+
+    // Style Options
+    // "noImplicitReturns": true,
+    // "noImplicitOverride": true,
+    // "noUnusedLocals": true,
+    // "noUnusedParameters": true,
+    // "noFallthroughCasesInSwitch": true,
+    // "noPropertyAccessFromIndexSignature": true,
+
+    // Recommended Options
+    "strict": true,
+    "jsx": "react-jsx",
+    "verbatimModuleSyntax": false, // true
+    "isolatedModules": true,
+    "noUncheckedSideEffectImports": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}
+
+