slate-angular 1.7.1 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slate-angular",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "peerDependencies": {
     "slate": ">= 0.63.0",
     "slate-history": "^0.62.0",

package/plugins/angular-editor.d.ts

@@ -9,7 +9,9 @@ import { Key } from '../utils/key';
  */
 export interface AngularEditor extends BaseEditor {
     insertData: (data: DataTransfer) => void;
-    setFragmentData: (data: DataTransfer) => void;
+    insertFragmentData: (data: DataTransfer) => boolean;
+    insertTextData: (data: DataTransfer) => boolean;
+    setFragmentData: (data: DataTransfer, originEvent?: 'drag' | 'copy' | 'cut') => void;
     deleteCutData: () => void;
     onKeydown: (event: KeyboardEvent) => void;
     onClick: (event: MouseEvent) => void;
@@ -36,8 +38,8 @@ export declare const AngularEditor: {
      */
     findPath(editor: AngularEditor, node: Node): Path;
     /**
-   * Find the DOM node that implements DocumentOrShadowRoot for the editor.
-   */
+     * Find the DOM node that implements DocumentOrShadowRoot for the editor.
+     */
     findDocumentOrShadowRoot(editor: AngularEditor): Document | ShadowRoot;
     /**
      * Check if the editor is focused.
@@ -73,6 +75,14 @@ export declare const AngularEditor: {
      * Insert data from a `DataTransfer` into the editor.
      */
     insertData(editor: AngularEditor, data: DataTransfer): void;
+    /**
+   * Insert fragment data from a `DataTransfer` into the editor.
+   */
+    insertFragmentData(editor: AngularEditor, data: DataTransfer): boolean;
+    /**
+     * Insert text data from a `DataTransfer` into the editor.
+     */
+    insertTextData(editor: AngularEditor, data: DataTransfer): boolean;
     /**
      * onKeydown hook.
      */
@@ -84,7 +94,7 @@ export declare const AngularEditor: {
     /**
      * Sets data from the currently selected fragment on a `DataTransfer`.
      */
-    setFragmentData(editor: AngularEditor, data: DataTransfer): void;
+    setFragmentData(editor: AngularEditor, data: DataTransfer, originEvent?: 'drag' | 'copy' | 'cut'): void;
     deleteCutData(editor: AngularEditor): void;
     /**
      * Find the native DOM element from a Slate node.

package/styles/index.scss

@@ -1,5 +1,4 @@
 @import '../components/block-card/block-card.component.scss';
-
 .slate-editable-container {
     display: block;
     outline: none;
@@ -8,7 +7,7 @@
     & [contenteditable="true"] {
         outline: none;
     }
-    & [slate-placeholder] {
+    & [data-slate-placeholder] {
         position: absolute;
         pointer-events: none;
         width: 100%;
@@ -17,12 +16,29 @@
         opacity: 0.333;
         user-select: none;
         text-decoration: none;
+        top: 0;
+    }
+    & [data-slate-leaf="true"] {
+        &.leaf-with-placeholder {
+            position: relative;
+            display: inline-block;
+            width: 100%;
+        }
+    }
+    &.firefox {
+        // Compatible for firefox, there are two problems with using inline-block
+        // Issue-1: paragraph height becomes taller
+        // Issue-2: blocks focus movement on key down
+        .leaf-with-placeholder {
+            display: inline-flex !important;
+        }
+        
     }
 }
+
 .slate-spacer {
     height: 0;
     color: transparent;
     outline: none;
     position: absolute;
-}
-
+}

package/utils/dom.d.ts

@@ -70,3 +70,9 @@ export declare const getEditableChild: (parent: DOMElement, index: number, direc
  * The domNode must be attached to the DOM.
  */
 export declare const getPlainText: (domNode: DOMNode) => string;
+export declare const getSlateFragmentAttribute: (dataTransfer: DataTransfer) => string | void;
+/**
+ * Get the x-slate-fragment attribute that exist in text/html data
+ * and append it to the DataTransfer object
+ */
+export declare const getClipboardData: (dataTransfer: DataTransfer, clipboardFormatKey?: string) => DataTransfer;

package/utils/environment.d.ts

@@ -1,7 +1,13 @@
 export declare const IS_IOS: boolean;
 export declare const IS_APPLE: boolean;
+export declare const IS_ANDROID: boolean;
 export declare const IS_FIREFOX: boolean;
 export declare const IS_SAFARI: boolean;
 export declare const IS_EDGE_LEGACY: boolean;
 export declare const IS_CHROME: boolean;
 export declare const IS_CHROME_LEGACY: boolean;
+export declare const IS_FIREFOX_LEGACY: boolean;
+export declare const IS_QQBROWSER: boolean;
+export declare const IS_UC_MOBILE: boolean;
+export declare const IS_WECHATBROWSER: boolean;
+export declare const HAS_BEFORE_INPUT_SUPPORT: boolean;

package/view/base.d.ts

@@ -33,11 +33,14 @@ export declare abstract class BaseComponent<T = SlateTextContext | SlateLeafCont
  */
 export declare class BaseLeafComponent extends BaseComponent<SlateLeafContext> implements OnInit {
     initialized: boolean;
+    placeholderElement: HTMLSpanElement;
     isSlateLeaf: boolean;
     get text(): Text;
     get leaf(): Text;
     ngOnInit(): void;
     onContextChange(): void;
+    renderPlaceholder(): void;
+    destroyPlaceholder(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseLeafComponent, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<BaseLeafComponent, never, never, {}, {}, never>;
 }