@ckeditor/ckeditor5-engine 38.2.0-alpha.0 → 39.0.0

package/src/view/observer/selectionobserver.js

@@ -151,6 +151,8 @@ export default class SelectionObserver extends Observer {
             return;
         }
         this.view.hasDomSelection = true;
+        // Mark the latest focus change as complete (we got new selection after the focus so the selection is in the focused element).
+        this.focusObserver.flush();
         if (this.selection.isEqual(newViewSelection) && this.domConverter.isDomSelectionCorrect(domSelection)) {
             return;
         }
@@ -165,8 +167,6 @@ export default class SelectionObserver extends Observer {
             this._reportInfiniteLoop();
             return;
         }
-        // Mark the latest focus change as complete (we got new selection after the focus so the selection is in the focused element).
-        this.focusObserver.flush();
         if (this.selection.isSimilar(newViewSelection)) {
             // If selection was equal and we are at this point of algorithm, it means that it was incorrect.
             // Just re-render it, no need to fire any events, etc.

package/src/view/placeholder.d.ts

@@ -7,30 +7,29 @@
  */
 import '../../theme/placeholder.css';
 import type DowncastWriter from './downcastwriter';
+import type EditableElement from './editableelement';
 import type Element from './element';
 import type View from './view';
 /**
  * A helper that enables a placeholder on the provided view element (also updates its visibility).
  * The placeholder is a CSS pseudo–element (with a text content) attached to the element.
  *
- * To change the placeholder text, simply call this method again with new options.
+ * To change the placeholder text, change value of the `placeholder` property in the provided `element`.
  *
  * To disable the placeholder, use {@link module:engine/view/placeholder~disablePlaceholder `disablePlaceholder()`} helper.
  *
  * @param options Configuration options of the placeholder.
  * @param options.view Editing view instance.
  * @param options.element Element that will gain a placeholder. See `options.isDirectHost` to learn more.
- * @param options.text Placeholder text.
  * @param options.isDirectHost If set `false`, the placeholder will not be enabled directly
  * in the passed `element` but in one of its children (selected automatically, i.e. a first empty child element).
  * Useful when attaching placeholders to elements that can host other elements (not just text), for instance,
  * editable root elements.
  * @param options.keepOnFocus If set `true`, the placeholder stay visible when the host element is focused.
  */
-export declare function enablePlaceholder({ view, element, text, isDirectHost, keepOnFocus }: {
+export declare function enablePlaceholder({ view, element, isDirectHost, keepOnFocus }: {
     view: View;
-    element: Element;
-    text: string;
+    element: PlaceholderableElement | EditableElement;
     isDirectHost?: boolean;
     keepOnFocus?: boolean;
 }): void;
@@ -83,3 +82,12 @@ export declare function hidePlaceholder(writer: DowncastWriter, element: Element
  * @param keepOnFocus Focusing the element will keep the placeholder visible.
  */
 export declare function needsPlaceholder(element: Element, keepOnFocus: boolean): boolean;
+/**
+ * Element that could have a placeholder.
+ */
+export interface PlaceholderableElement extends Element {
+    /**
+     * The text of element's placeholder.
+     */
+    placeholder?: string;
+}

package/src/view/placeholder.js

@@ -12,21 +12,20 @@ const documentPlaceholders = new WeakMap();
  * A helper that enables a placeholder on the provided view element (also updates its visibility).
  * The placeholder is a CSS pseudo–element (with a text content) attached to the element.
  *
- * To change the placeholder text, simply call this method again with new options.
+ * To change the placeholder text, change value of the `placeholder` property in the provided `element`.
  *
  * To disable the placeholder, use {@link module:engine/view/placeholder~disablePlaceholder `disablePlaceholder()`} helper.
  *
  * @param options Configuration options of the placeholder.
  * @param options.view Editing view instance.
  * @param options.element Element that will gain a placeholder. See `options.isDirectHost` to learn more.
- * @param options.text Placeholder text.
  * @param options.isDirectHost If set `false`, the placeholder will not be enabled directly
  * in the passed `element` but in one of its children (selected automatically, i.e. a first empty child element).
  * Useful when attaching placeholders to elements that can host other elements (not just text), for instance,
  * editable root elements.
  * @param options.keepOnFocus If set `true`, the placeholder stay visible when the host element is focused.
  */
-export function enablePlaceholder({ view, element, text, isDirectHost = true, keepOnFocus = false }) {
+export function enablePlaceholder({ view, element, isDirectHost = true, keepOnFocus = false }) {
     const doc = view.document;
     // Use a single a single post fixer per—document to update all placeholders.
     if (!documentPlaceholders.has(doc)) {
@@ -39,15 +38,25 @@ export function enablePlaceholder({ view, element, text, isDirectHost = true, ke
             view.change(writer => updateDocumentPlaceholders(doc, writer));
         }, { priority: 'high' });
     }
-    // Store information about the element placeholder under its document.
-    documentPlaceholders.get(doc).set(element, {
-        text,
-        isDirectHost,
-        keepOnFocus,
-        hostElement: isDirectHost ? element : null
-    });
-    // Update the placeholders right away.
-    view.change(writer => updateDocumentPlaceholders(doc, writer));
+    if (element.is('editableElement')) {
+        element.on('change:placeholder', (evtInfo, evt, text) => {
+            setPlaceholder(text);
+        });
+    }
+    if (element.placeholder) {
+        setPlaceholder(element.placeholder);
+    }
+    function setPlaceholder(text) {
+        // Store information about the element placeholder under its document.
+        documentPlaceholders.get(doc).set(element, {
+            text,
+            isDirectHost,
+            keepOnFocus,
+            hostElement: isDirectHost ? element : null
+        });
+        // Update the placeholders right away.
+        view.change(writer => updateDocumentPlaceholders(doc, writer));
+    }
 }
 /**
  * Disables the placeholder functionality from a given element.

package/src/view/renderer.js

@@ -747,8 +747,7 @@ export default class Renderer extends ObservableMixin() {
         // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', '', anchor, focus
         // @if CK_DEBUG_TYPING // 	);
         // @if CK_DEBUG_TYPING // }
-        domSelection.collapse(anchor.parent, anchor.offset);
-        domSelection.extend(focus.parent, focus.offset);
+        domSelection.setBaseAndExtent(anchor.parent, anchor.offset, focus.parent, focus.offset);
         // Firefox–specific hack (https://github.com/ckeditor/ckeditor5-engine/issues/1439).
         if (env.isGecko) {
             fixGeckoSelectionAfterBr(focus, domSelection);

package/src/view/view.d.ts

@@ -17,6 +17,15 @@ import type { StylesProcessor } from './stylesmap';
 import type Element from './element';
 import type Node from './node';
 import type Item from './item';
+import KeyObserver from './observer/keyobserver';
+import FakeSelectionObserver from './observer/fakeselectionobserver';
+import MutationObserver from './observer/mutationobserver';
+import SelectionObserver from './observer/selectionobserver';
+import FocusObserver from './observer/focusobserver';
+import CompositionObserver from './observer/compositionobserver';
+import InputObserver from './observer/inputobserver';
+import ArrowKeysObserver from './observer/arrowkeysobserver';
+import TabObserver from './observer/tabobserver';
 type IfTrue<T> = T extends true ? true : never;
 type DomRange = globalThis.Range;
 declare const View_base: {
@@ -168,13 +177,7 @@ export default class View extends View_base {
      * @returns Added observer instance.
      */
     addObserver(ObserverConstructor: ObserverConstructor): Observer;
-    /**
-     * Returns observer of the given type or `undefined` if such observer has not been added yet.
-     *
-     * @param ObserverConstructor The constructor of an observer to get.
-     * @returns Observer instance or undefined.
-     */
-    getObserver<T extends ObserverConstructor>(ObserverConstructor: T): InstanceType<T> | undefined;
+    getObserver<T extends ObserverConstructor>(ObserverConstructor: T): T extends AlwaysRegisteredObservers ? InstanceType<T> : InstanceType<T> | undefined;
     /**
      * Disables all added observers.
      */
@@ -477,4 +480,8 @@ export type ViewScrollToTheSelectionEventData = {
     alignToTop?: boolean;
     forceScroll?: boolean;
 };
+/**
+ * Observers that are always registered.
+ */
+export type AlwaysRegisteredObservers = typeof MutationObserver | typeof FocusObserver | typeof SelectionObserver | typeof KeyObserver | typeof FakeSelectionObserver | typeof CompositionObserver | typeof ArrowKeysObserver | typeof InputObserver | typeof TabObserver;
 export {};

package/src/view/view.js

@@ -21,7 +21,7 @@ import CompositionObserver from './observer/compositionobserver';
 import InputObserver from './observer/inputobserver';
 import ArrowKeysObserver from './observer/arrowkeysobserver';
 import TabObserver from './observer/tabobserver';
-import { CKEditorError, ObservableMixin, scrollViewportToShowTarget } from '@ckeditor/ckeditor5-utils';
+import { CKEditorError, env, ObservableMixin, scrollViewportToShowTarget } from '@ckeditor/ckeditor5-utils';
 import { injectUiElementHandling } from './uielement';
 import { injectQuirksHandling } from './filler';
 import { cloneDeep } from 'lodash-es';
@@ -104,6 +104,7 @@ export default class View extends ObservableMixin() {
             .to(this.document, 'isFocused', 'isSelecting', 'isComposing');
         this._writer = new DowncastWriter(this.document);
         // Add default observers.
+        // Make sure that this list matches AlwaysRegisteredObservers type.
         this.addObserver(MutationObserver);
         this.addObserver(FocusObserver);
         this.addObserver(SelectionObserver);
@@ -132,6 +133,17 @@ export default class View extends ObservableMixin() {
         this.listenTo(this.document, 'change:isFocused', () => {
             this._hasChangedSinceTheLastRendering = true;
         });
+        // Remove ranges from DOM selection if editor is blurred.
+        // See https://github.com/ckeditor/ckeditor5/issues/5753.
+        if (env.isiOS) {
+            this.listenTo(this.document, 'blur', (evt, data) => {
+                const relatedViewElement = this.domConverter.mapDomToView(data.domEvent.relatedTarget);
+                // Do not modify DOM selection if focus is moved to other editable of the same editor.
+                if (!relatedViewElement) {
+                    this.domConverter._clearDomSelection();
+                }
+            });
+        }
     }
     /**
      * Attaches a DOM root element to the view element and enable all observers on that element.