@kolkov/angular-editor 3.0.0-beta.0 → 3.0.0-beta.1

package/lib/angular-editor.service.d.ts

@@ -1,87 +1,87 @@
-import { HttpClient, HttpEvent } from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { CustomClass } from './config';
-import * as i0 from "@angular/core";
-export interface UploadResponse {
-    imageUrl: string;
-}
-export declare class AngularEditorService {
-    private http;
-    private doc;
-    savedSelection: Range | null;
-    selectedText: string;
-    uploadUrl: string;
-    uploadWithCredentials: boolean;
-    constructor(http: HttpClient, doc: any);
-    /**
-     * Executed command from editor header buttons exclude toggleEditorMode
-     * @param command string from triggerCommand
-     * @param value
-     */
-    executeCommand(command: string, value?: string): void;
-    /**
-     * Create URL link
-     * @param url string from UI prompt
-     */
-    createLink(url: string): void;
-    /**
-     * insert color either font or background
-     *
-     * @param color color to be inserted
-     * @param where where the color has to be inserted either text/background
-     */
-    insertColor(color: string, where: string): void;
-    /**
-     * Set font name
-     * @param fontName string
-     */
-    setFontName(fontName: string): void;
-    /**
-     * Set font size
-     * @param fontSize string
-     */
-    setFontSize(fontSize: string): void;
-    /**
-     * Create raw HTML
-     * @param html HTML string
-     */
-    insertHtml(html: string): void;
-    /**
-     * save selection when the editor is focussed out
-     */
-    saveSelection: () => void;
-    /**
-     * restore selection when the editor is focused in
-     *
-     * saved selection when the editor is focused out
-     */
-    restoreSelection(): boolean;
-    /**
-     * setTimeout used for execute 'saveSelection' method in next event loop iteration
-     */
-    executeInNextQueueIteration(callbackFn: (...args: any[]) => any, timeout?: number): void;
-    /** check any selection is made or not */
-    private checkSelection;
-    /**
-     * Upload file to uploadUrl
-     * @param file The file
-     */
-    uploadImage(file: File): Observable<HttpEvent<UploadResponse>>;
-    /**
-     * Insert image with Url
-     * @param imageUrl The imageUrl.
-     */
-    insertImage(imageUrl: string): void;
-    setDefaultParagraphSeparator(separator: string): void;
-    createCustomClass(customClass: CustomClass): void;
-    insertVideo(videoUrl: string): void;
-    private insertYouTubeVideoTag;
-    private insertVimeoVideoTag;
-    nextNode(node: any): any;
-    getRangeSelectedNodes(range: any, includePartiallySelectedContainers: any): any[];
-    getSelectedNodes(): any[];
-    replaceWithOwnChildren(el: any): void;
-    removeSelectedElements(tagNames: any): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AngularEditorService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<AngularEditorService>;
-}
+import { HttpClient, HttpEvent } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { CustomClass } from './config';
+import * as i0 from "@angular/core";
+export interface UploadResponse {
+    imageUrl: string;
+}
+export declare class AngularEditorService {
+    private http;
+    private doc;
+    savedSelection: Range | null;
+    selectedText: string;
+    uploadUrl: string;
+    uploadWithCredentials: boolean;
+    constructor(http: HttpClient, doc: any);
+    /**
+     * Executed command from editor header buttons exclude toggleEditorMode
+     * @param command string from triggerCommand
+     * @param value
+     */
+    executeCommand(command: string, value?: string): void;
+    /**
+     * Create URL link
+     * @param url string from UI prompt
+     */
+    createLink(url: string): void;
+    /**
+     * insert color either font or background
+     *
+     * @param color color to be inserted
+     * @param where where the color has to be inserted either text/background
+     */
+    insertColor(color: string, where: string): void;
+    /**
+     * Set font name
+     * @param fontName string
+     */
+    setFontName(fontName: string): void;
+    /**
+     * Set font size
+     * @param fontSize string
+     */
+    setFontSize(fontSize: string): void;
+    /**
+     * Create raw HTML
+     * @param html HTML string
+     */
+    insertHtml(html: string): void;
+    /**
+     * save selection when the editor is focussed out
+     */
+    saveSelection: () => void;
+    /**
+     * restore selection when the editor is focused in
+     *
+     * saved selection when the editor is focused out
+     */
+    restoreSelection(): boolean;
+    /**
+     * setTimeout used for execute 'saveSelection' method in next event loop iteration
+     */
+    executeInNextQueueIteration(callbackFn: (...args: any[]) => any, timeout?: number): void;
+    /** check any selection is made or not */
+    private checkSelection;
+    /**
+     * Upload file to uploadUrl
+     * @param file The file
+     */
+    uploadImage(file: File): Observable<HttpEvent<UploadResponse>>;
+    /**
+     * Insert image with Url
+     * @param imageUrl The imageUrl.
+     */
+    insertImage(imageUrl: string): void;
+    setDefaultParagraphSeparator(separator: string): void;
+    createCustomClass(customClass: CustomClass): void;
+    insertVideo(videoUrl: string): void;
+    private insertYouTubeVideoTag;
+    private insertVimeoVideoTag;
+    nextNode(node: any): any;
+    getRangeSelectedNodes(range: any, includePartiallySelectedContainers: any): any[];
+    getSelectedNodes(): any[];
+    replaceWithOwnChildren(el: any): void;
+    removeSelectedElements(tagNames: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AngularEditorService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AngularEditorService>;
+}

package/lib/config.d.ts

@@ -1,39 +1,39 @@
-import { UploadResponse } from './angular-editor.service';
-import { HttpEvent } from '@angular/common/http';
-import { Observable } from 'rxjs';
-export interface CustomClass {
-    name: string;
-    class: string;
-    tag?: string;
-}
-export interface Font {
-    name: string;
-    class: string;
-}
-export interface AngularEditorConfig {
-    editable?: boolean;
-    spellcheck?: boolean;
-    height?: 'auto' | string;
-    minHeight?: '0' | string;
-    maxHeight?: 'auto' | string;
-    width?: 'auto' | string;
-    minWidth?: '0' | string;
-    translate?: 'yes' | 'now' | string;
-    enableToolbar?: boolean;
-    showToolbar?: boolean;
-    placeholder?: string;
-    defaultParagraphSeparator?: string;
-    defaultFontName?: string;
-    defaultFontSize?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | string;
-    uploadUrl?: string;
-    upload?: (file: File) => Observable<HttpEvent<UploadResponse>>;
-    uploadWithCredentials?: boolean;
-    fonts?: Font[];
-    customClasses?: CustomClass[];
-    sanitize?: boolean;
-    toolbarPosition?: 'top' | 'bottom';
-    outline?: boolean;
-    toolbarHiddenButtons?: string[][];
-    rawPaste?: boolean;
-}
-export declare const angularEditorConfig: AngularEditorConfig;
+import { UploadResponse } from './angular-editor.service';
+import { HttpEvent } from '@angular/common/http';
+import { Observable } from 'rxjs';
+export interface CustomClass {
+    name: string;
+    class: string;
+    tag?: string;
+}
+export interface Font {
+    name: string;
+    class: string;
+}
+export interface AngularEditorConfig {
+    editable?: boolean;
+    spellcheck?: boolean;
+    height?: 'auto' | string;
+    minHeight?: '0' | string;
+    maxHeight?: 'auto' | string;
+    width?: 'auto' | string;
+    minWidth?: '0' | string;
+    translate?: 'yes' | 'now' | string;
+    enableToolbar?: boolean;
+    showToolbar?: boolean;
+    placeholder?: string;
+    defaultParagraphSeparator?: string;
+    defaultFontName?: string;
+    defaultFontSize?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | string;
+    uploadUrl?: string;
+    upload?: (file: File) => Observable<HttpEvent<UploadResponse>>;
+    uploadWithCredentials?: boolean;
+    fonts?: Font[];
+    customClasses?: CustomClass[];
+    sanitize?: boolean;
+    toolbarPosition?: 'top' | 'bottom';
+    outline?: boolean;
+    toolbarHiddenButtons?: string[][];
+    rawPaste?: boolean;
+}
+export declare const angularEditorConfig: AngularEditorConfig;

package/lib/utils.d.ts

@@ -1 +1 @@
-export declare function isDefined(value: any): boolean;
+export declare function isDefined(value: any): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkov/angular-editor",
-  "version": "3.0.0-beta.0",
+  "version": "3.0.0-beta.1",
   "description": "A simple native WYSIWYG editor for Angular 8+, 13+. Rich Text editor component for Angular.",
   "author": "Andrey Kolkov <a.kolkov@gmail.com>",
   "repository": "https://github.com/kolkov/angular-editor",

package/public-api.d.ts

@@ -1,8 +1,8 @@
-export * from './lib/angular-editor.service';
-export * from './lib/angular-editor.component';
-export * from './lib/ae-button/ae-button.component';
-export * from './lib/ae-toolbar-set/ae-toolbar-set.component';
-export * from './lib/ae-select/ae-select.component';
-export * from './lib/angular-editor-toolbar.component';
-export * from './lib/angular-editor.module';
-export { AngularEditorConfig, CustomClass } from './lib/config';
+export * from './lib/angular-editor.service';
+export * from './lib/angular-editor.component';
+export * from './lib/ae-button/ae-button.component';
+export * from './lib/ae-toolbar-set/ae-toolbar-set.component';
+export * from './lib/ae-select/ae-select.component';
+export * from './lib/angular-editor-toolbar.component';
+export * from './lib/angular-editor.module';
+export { AngularEditorConfig, CustomClass } from './lib/config';

package/src/lib/style.scss

@@ -0,0 +1,290 @@
+a {
+  cursor: pointer;
+}
+
+.angular-editor-textarea {
+  min-height: 150px;
+  overflow: auto;
+  margin-top: 5px;
+  resize: vertical;
+  &:after {
+    content:"";
+    position: absolute;
+    bottom: 0;
+    right:0;
+    display:block;
+    width:8px;
+    height:8px;
+    cursor: nwse-resize;
+    background-color: rgba(255,255,255,0.5)
+  }
+}
+
+.angular-editor-toolbar {
+  font: 100 14px/15px Roboto, Arial, sans-serif;
+  background-color: #f5f5f5;
+  font-size: 0.8rem;
+  padding: 0.2rem;
+  border: 1px solid #ddd;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+
+  .angular-editor-toolbar-set {
+    display: flex;
+    gap: 1px;
+    width: fit-content;
+    vertical-align: baseline;
+    .angular-editor-button {
+      background-color: white;
+      vertical-align: middle;
+      border: 1px solid #ddd;
+      padding: 0.4rem;
+      float: left;
+      width: 2rem;
+      height: 2rem;
+
+      &:hover {
+        cursor: pointer;
+        background-color: #f1f1f1;
+        transition: 0.2s ease;
+      }
+
+      &:focus,
+      &.focus {
+        outline: 0;
+      }
+
+      &:disabled {
+        background-color: #f5f5f5;
+        pointer-events: none;
+        cursor: not-allowed;
+
+        > .color-label {
+          pointer-events: none;
+          cursor: not-allowed;
+
+          &.foreground {
+            :after {
+              background: #555555;
+            }
+          }
+
+          &.background {
+            background: #555555;
+          }
+        }
+      }
+
+      &.active {
+        background: #fff5b9;
+
+        &:hover {
+          background-color: #fffa98;
+        }
+      }
+    }
+
+    select {
+      font-size: 11px;
+      width: 90px;
+      vertical-align: middle;
+      background-color: transparent;
+      border: 0.5px solid rgba(255, 255, 255, 0);
+      border-radius: 5px;
+      outline: none;
+      padding: 0.4rem;
+      cursor: pointer;
+    }
+
+    .select-heading {
+      display: inline-block;
+      width: 90px;
+      @supports not( -moz-appearance:none ) {
+        optgroup {
+          font-size: 12px;
+          background-color: #f4f4f4;
+          padding: 5px;
+        }
+        option {
+          border: 1px solid;
+          background-color: white;
+        }
+        .default {
+          font-size: 16px;
+        }
+        .h1 {
+          font-size: 24px;
+        }
+        .h2 {
+          font-size: 20px;
+        }
+        .h3 {
+          font-size: 16px;
+        }
+        .h4 {
+          font-size: 15px;
+        }
+        .h5 {
+          font-size: 14px;
+        }
+        .h6 {
+          font-size: 13px;
+        }
+        .div {
+          font-size: 12px;
+        }
+        .pre {
+          font-size: 12px;
+        }
+      }
+
+      &:disabled {
+        background-color: #f5f5f5;
+        pointer-events: none;
+        cursor: not-allowed;
+      }
+
+      &:hover {
+        cursor: pointer;
+        background-color: #f1f1f1;
+        transition: 0.2s ease;
+      }
+    }
+
+    .select-font {
+      display: inline-block;
+      width: 90px;
+      @supports not( -moz-appearance:none ) {
+        optgroup {
+          font-size: 12px;
+          background-color: #f4f4f4;
+          padding: 5px;
+        }
+        option {
+          border: 1px solid;
+          background-color: white;
+        }
+      }
+
+      &:disabled {
+        background-color: #f5f5f5;
+        pointer-events: none;
+        cursor: not-allowed;
+      }
+
+      &:hover {
+        cursor: pointer;
+        background-color: #f1f1f1;
+        transition: 0.2s ease;
+      }
+    }
+
+    .select-font-size {
+      display: inline-block;
+      width: 50px;
+      @supports not( -moz-appearance:none ) {
+        optgroup {
+          font-size: 12px;
+          background-color: #f4f4f4;
+          padding: 5px;
+        }
+        option {
+          border: 1px solid;
+          background-color: white;
+        }
+        .size1 {
+          font-size: 10px;
+        }
+        .size2 {
+          font-size: 12px;
+        }
+        .size3 {
+          font-size: 14px;
+        }
+        .size4 {
+          font-size: 16px;
+        }
+        .size5 {
+          font-size: 18px;
+        }
+        .size6 {
+          font-size: 20px;
+        }
+        .size7 {
+          font-size: 22px;
+        }
+      }
+
+      &:disabled {
+        background-color: #f5f5f5;
+        pointer-events: none;
+        cursor: not-allowed;
+      }
+
+      &:hover {
+        cursor: pointer;
+        background-color: #f1f1f1;
+        transition: 0.2s ease;
+      }
+    }
+
+    .select-custom-style {
+      display: inline-block;
+      width: 90px;
+      @supports not( -moz-appearance:none ) {
+        optgroup {
+          font-size: 12px;
+          background-color: #f4f4f4;
+          padding: 5px;
+        }
+        option {
+          border: 1px solid;
+          background-color: white;
+        }
+      }
+
+      &:disabled {
+        background-color: #f5f5f5;
+        pointer-events: none;
+        cursor: not-allowed;
+      }
+
+      &:hover {
+        cursor: pointer;
+        background-color: #f1f1f1;
+        transition: 0.2s ease;
+      }
+    }
+
+    .color-label {
+      position: relative;
+      cursor: pointer;
+    }
+
+    .background {
+      font-size: smaller;
+      background: #1b1b1b;
+      color: white;
+      padding: 3px;
+    }
+
+    .foreground {
+      :after {
+        position: absolute;
+        content: "";
+        left: -1px;
+        top: auto;
+        bottom: -3px;
+        right: auto;
+        width: 15px;
+        height: 2px;
+        z-index: 0;
+        background: #1b1b1b;
+      }
+    }
+  }
+  .angular-editor-toolbar-set:not([style*="display:none"]):not([style*="display: none"]){
+    //display: inline-block;
+  }
+}