Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/ckeditor5-code-block/src/codeblockediting.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {
type UpcastElementEvent,
type UpcastTextEvent,
type ModelElement,
type SelectionChangeRangeEvent
type ModelSelectionChangeRangeEvent
} from 'ckeditor5/src/engine.js';
import { ClipboardPipeline, type ClipboardContentInsertionEvent } from 'ckeditor5/src/clipboard.js';

Expand Down Expand Up @@ -318,7 +318,7 @@ export class CodeBlockEditing extends Plugin {

let lastFocusedCodeBlock: ModelElement | null = null;

model.document.selection.on<SelectionChangeRangeEvent>( 'change:range', () => {
model.document.selection.on<ModelSelectionChangeRangeEvent>( 'change:range', () => {
const focusParent = model.document.selection.focus!.parent;

if ( !ui || lastFocusedCodeBlock === focusParent || !focusParent.is( 'element' ) ) {
Expand Down
4 changes: 2 additions & 2 deletions packages/ckeditor5-engine/src/controller/editingcontroller.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ import { type ModelTextProxy } from '../model/textproxy.js';
import type { ModelDocumentChangeEvent } from '../model/document.js';
import type { Marker } from '../model/markercollection.js';
import type { StylesProcessor } from '../view/stylesmap.js';
import type { ViewDocumentSelectionChangeEvent } from '../view/observer/selectionobserver.js';
import type { ViewDocumentObserverSelectionChangeEvent } from '../view/observer/selectionobserver.js';

// @if CK_DEBUG_ENGINE // const { dumpTrees, initDocumentDumping } = require( '../dev-utils/utils' );

Expand Down Expand Up @@ -116,7 +116,7 @@ export class EditingController extends /* #__PURE__ */ ObservableMixin() {
}, { priority: 'low' } );

// Convert selection from the view to the model when it changes in the view.
this.listenTo<ViewDocumentSelectionChangeEvent>( this.view.document, 'selectionChange',
this.listenTo<ViewDocumentObserverSelectionChangeEvent>( this.view.document, 'selectionChange',
convertSelectionChange( this.model, this.mapper )
);

Expand Down
13 changes: 8 additions & 5 deletions packages/ckeditor5-engine/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,8 @@ export {
type DowncastAddHighlightCallback,
type DowncastHighlightDescriptorCreatorFunction,
type DowncastRemoveHighlightCallback,
type DowncastMarkerDataCreatorFunction
type DowncastMarkerDataCreatorFunction,
type DowncastAttributeCreatorFunction
} from './conversion/downcasthelpers.js';

export type {
Expand Down Expand Up @@ -213,7 +214,6 @@ export type {
ModelModifySelectionEvent,
ModelCanEditAtEvent
} from './model/model.js';
export type { ModelSelectionChangeRangeEvent as SelectionChangeRangeEvent } from './model/selection.js';

// View.
export { ViewDataTransfer, type ViewDropEffect, type ViewEffectAllowed } from './view/datatransfer.js';
Expand Down Expand Up @@ -247,7 +247,7 @@ export { ViewRawElement } from './view/rawelement.js';
export { ViewUIElement } from './view/uielement.js';
export { ViewDocumentFragment } from './view/documentfragment.js';
export type { ViewElementDefinition, ViewElementObjectDefinition } from './view/elementdefinition.js';
export { ViewDocumentSelection } from './view/documentselection.js';
export { ViewDocumentSelection, type ViewDocumentSelectionChangeEvent } from './view/documentselection.js';
export type { ViewItem } from './view/item.js';
export { ViewNode, type ViewNodeChangeEvent } from './view/node.js';
export {
Expand Down Expand Up @@ -298,7 +298,7 @@ export {

export {
SelectionObserver,
type ViewDocumentSelectionEventData
type ViewDocumentObserverSelectionEventData
} from './view/observer/selectionobserver.js';

export { CompositionObserver, type ViewDocumentCompositionEventData } from './view/observer/compositionobserver.js';
Expand Down Expand Up @@ -366,7 +366,10 @@ export type {
} from './view/observer/touchobserver.js';
export type { ViewDocumentTabEvent } from './view/observer/tabobserver.js';
export type { ViewDocumentClickEvent } from './view/observer/clickobserver.js';
export type { ViewDocumentSelectionChangeEvent, ViewDocumentSelectionChangeDoneEvent } from './view/observer/selectionobserver.js';
export type {
ViewDocumentObserverSelectionChangeEvent,
ViewDocumentObserverSelectionChangeDoneEvent
} from './view/observer/selectionobserver.js';

// View / Styles.
export {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ import type { ViewDocumentArrowKeyEvent } from './arrowkeysobserver.js';
import { ViewSelection } from '../selection.js';
import { type EditingView } from '../view.js';
import type {
ViewDocumentSelectionChangeEvent,
ViewDocumentSelectionChangeDoneEvent,
ViewDocumentSelectionEventData
ViewDocumentObserverSelectionChangeEvent,
ViewDocumentObserverSelectionChangeDoneEvent,
ViewDocumentObserverSelectionEventData
} from './selectionobserver.js';
import { keyCodes } from '@ckeditor/ckeditor5-utils';
import { debounce, type DebouncedFunction } from 'es-toolkit/compat';
Expand All @@ -30,7 +30,7 @@ export class FakeSelectionObserver extends Observer {
/**
* Fires debounced event `selectionChangeDone`. It uses `es-toolkit#debounce` method to delay function call.
*/
private readonly _fireSelectionChangeDoneDebounced: DebouncedFunction<( data: ViewDocumentSelectionEventData ) => void>;
private readonly _fireSelectionChangeDoneDebounced: DebouncedFunction<( data: ViewDocumentObserverSelectionEventData ) => void>;

/**
* Creates new FakeSelectionObserver instance.
Expand All @@ -39,7 +39,7 @@ export class FakeSelectionObserver extends Observer {
super( view );

this._fireSelectionChangeDoneDebounced = debounce( data => {
this.document.fire<ViewDocumentSelectionChangeDoneEvent>( 'selectionChangeDone', data );
this.document.fire<ViewDocumentObserverSelectionChangeDoneEvent>( 'selectionChangeDone', data );
}, 200 );
}

Expand Down Expand Up @@ -110,7 +110,7 @@ export class FakeSelectionObserver extends Observer {
};

// Fire dummy selection change event.
this.document.fire<ViewDocumentSelectionChangeEvent>( 'selectionChange', data );
this.document.fire<ViewDocumentObserverSelectionChangeEvent>( 'selectionChange', data );

// Call` #_fireSelectionChangeDoneDebounced` every time when `selectionChange` event is fired.
// This function is debounced what means that `selectionChangeDone` event will be fired only when
Expand Down
20 changes: 10 additions & 10 deletions packages/ckeditor5-engine/src/view/observer/selectionobserver.ts
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export class SelectionObserver extends Observer {
/**
* Fires debounced event `selectionChangeDone`. It uses `es-toolkit#debounce` method to delay function call.
*/
private readonly _fireSelectionChangeDoneDebounced: DebouncedFunction<( data: ViewDocumentSelectionEventData ) => void>;
private readonly _fireSelectionChangeDoneDebounced: DebouncedFunction<( data: ViewDocumentObserverSelectionEventData ) => void>;

/**
* When called, starts clearing the {@link #_loopbackCounter} counter in time intervals. When the number of selection
Expand Down Expand Up @@ -103,7 +103,7 @@ export class SelectionObserver extends Observer {
this.domConverter = view.domConverter;

this._fireSelectionChangeDoneDebounced = debounce( data => {
this.document.fire<ViewDocumentSelectionChangeDoneEvent>( 'selectionChangeDone', data );
this.document.fire<ViewDocumentObserverSelectionChangeDoneEvent>( 'selectionChangeDone', data );
}, 200 );

this._clearInfiniteLoopInterval = setInterval( () => this._clearInfiniteLoop(), 1000 );
Expand Down Expand Up @@ -339,7 +339,7 @@ export class SelectionObserver extends Observer {
// Just re-render it, no need to fire any events, etc.
this.view.forceRender();
} else {
const data: ViewDocumentSelectionEventData = {
const data: ViewDocumentObserverSelectionEventData = {
oldSelection: this.selection,
newSelection: newViewSelection,
domSelection
Expand All @@ -353,7 +353,7 @@ export class SelectionObserver extends Observer {
// @if CK_DEBUG_TYPING // }

// Prepare data for new selection and fire appropriate events.
this.document.fire<ViewDocumentSelectionChangeEvent>( 'selectionChange', data );
this.document.fire<ViewDocumentObserverSelectionChangeEvent>( 'selectionChange', data );

// Call `#_fireSelectionChangeDoneDebounced` every time when `selectionChange` event is fired.
// This function is debounced what means that `selectionChangeDone` event will be fired only when
Expand All @@ -372,9 +372,9 @@ export class SelectionObserver extends Observer {
}

/**
* The value of {@link ~ViewDocumentSelectionChangeEvent} and {@link ~ViewDocumentSelectionChangeDoneEvent} events.
* The value of {@link ~ViewDocumentObserverSelectionChangeEvent} and {@link ~ViewDocumentObserverSelectionChangeDoneEvent} events.
*/
export type ViewDocumentSelectionEventData = {
export type ViewDocumentObserverSelectionEventData = {

/**
* Old View selection which is {@link module:engine/view/document~ViewDocument#selection}.
Expand Down Expand Up @@ -404,9 +404,9 @@ export type ViewDocumentSelectionEventData = {
* @see module:engine/view/observer/selectionobserver~SelectionObserver
* @eventName module:engine/view/document~ViewDocument#selectionChange
*/
export type ViewDocumentSelectionChangeEvent = {
export type ViewDocumentObserverSelectionChangeEvent = {
name: 'selectionChange';
args: [ ViewDocumentSelectionEventData ];
args: [ ViewDocumentObserverSelectionEventData ];
};

/**
Expand All @@ -420,7 +420,7 @@ export type ViewDocumentSelectionChangeEvent = {
* @see module:engine/view/observer/selectionobserver~SelectionObserver
* @eventName module:engine/view/document~ViewDocument#selectionChangeDone
*/
export type ViewDocumentSelectionChangeDoneEvent = {
export type ViewDocumentObserverSelectionChangeDoneEvent = {
name: 'selectionChangeDone';
args: [ ViewDocumentSelectionEventData ];
args: [ ViewDocumentObserverSelectionEventData ];
};
5 changes: 3 additions & 2 deletions packages/ckeditor5-engine/src/view/view.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,14 +42,15 @@ import {
env,
ObservableMixin,
scrollViewportToShowTarget,
type ObservableChangeEvent
type ObservableChangeEvent,
type IfTrue
} from '@ckeditor/ckeditor5-utils';
import { injectUiElementHandling } from './uielement.js';
import { injectQuirksHandling } from './filler.js';

import { cloneDeep } from 'es-toolkit/compat';

type IfTrue<T> = T extends true ? true : never;
// type IfTrue<T> = T extends true ? true : never;
type DomRange = globalThis.Range;

/**
Expand Down
6 changes: 3 additions & 3 deletions packages/ckeditor5-fullscreen/docs/features/fullscreen.md
Original file line number Diff line number Diff line change
Expand Up @@ -168,15 +168,15 @@ Below you will find a customized demo:

This section covers how to provide fullscreen mode integration for other {@link getting-started/setup/editor-types editor types} than classic and decoupled. Please note that only these two editor types are officially supported, so the code snippets below are exemplary and may not solve all technical challenges.

First, you need to create a custom class extending {@link module:fullscreen/handlers/abstracteditorhandler~AbstractEditorHandler `AbstractEditorHandler`}. Besides the optional typing improvements, the most important thing is to implement its custom {@link module:fullscreen/handlers/abstracteditorhandler~AbstractEditorHandler#defaultOnEnter `#defaultOnEnter()`} method. It should move the editor UI elements proper for your editor type to the fullscreen container, preferably using {@link module:fullscreen/handlers/abstracteditorhandler~AbstractEditorHandler#moveToFullscreen `#moveToFullscreen()`} helper - it will assure the elements are moved back in DOM when leaving fullscreen mode.
First, you need to create a custom class extending {@link module:fullscreen/handlers/abstracteditorhandler~FullscreenAbstractEditorHandler `FullscreenAbstractEditorHandler`}. Besides the optional typing improvements, the most important thing is to implement its custom {@link module:fullscreen/handlers/abstracteditorhandler~FullscreenAbstractEditorHandler#defaultOnEnter `#defaultOnEnter()`} method. It should move the editor UI elements proper for your editor type to the fullscreen container, preferably using {@link module:fullscreen/handlers/abstracteditorhandler~FullscreenAbstractEditorHandler#moveToFullscreen `#moveToFullscreen()`} helper - it will assure the elements are moved back in DOM when leaving fullscreen mode.

Then, in the editor's `toggleFullscreen` command, you will need to substitute the {@link module:fullscreen/fullscreencommand~FullscreenCommand#fullscreenHandler `#fullscreenHandler`} property with an instance of your custom class. It can be done by adding a custom plugin that should be later added to the editor configuration (see the full example below).

```ts
import { AbstractEditorHandler, FullscreenEditing } from '@ckeditor/ckeditor5-fullscreen';
import { FullscreenAbstractEditorHandler, FullscreenEditing } from '@ckeditor/ckeditor5-fullscreen';
import { Plugin } from 'ckeditor5/src/core';

class CustomEditorHandler extends AbstractEditorHandler {
class CustomEditorHandler extends FullscreenAbstractEditorHandler {
// It's not mandatory to override `#_editor` property, but that will help TypeScript to properly handle the class.
// Skip if you are not using TS.
protected override readonly _editor: CustomEditorClass;
Expand Down
23 changes: 12 additions & 11 deletions packages/ckeditor5-fullscreen/src/fullscreencommand.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ import { Command, type Editor } from 'ckeditor5/src/core.js';
import type { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import type { DecoupledEditor } from '@ckeditor/ckeditor5-editor-decoupled';

import { AbstractEditorHandler } from './handlers/abstracteditorhandler.js';
import { ClassicEditorHandler } from './handlers/classiceditorhandler.js';
import { DecoupledEditorHandler } from './handlers/decouplededitorhandler.js';
import { FullscreenAbstractEditorHandler } from './handlers/abstracteditorhandler.js';
import { FullscreenClassicEditorHandler } from './handlers/classiceditorhandler.js';
import { FullscreenDecoupledEditorHandler } from './handlers/decouplededitorhandler.js';

/**
* A command toggling the fullscreen mode.
Expand All @@ -31,19 +31,20 @@ export class FullscreenCommand extends Command {
* Specialized class handling the fullscreen mode toggling for a specific editor type.
*
* If you want to add support for a new editor type (for now, only Classic and Decoupled editors are handled),
* create a custom handler that extends `AbstractEditorHandler` and replace `fullscreenHandler` with it after editor initialization:
* create a custom handler that extends `FullscreenAbstractEditorHandler` and replace `fullscreenHandler` with it after
* editor initialization:
*
* ```ts
* // See the details of how to implement a custom handler in the `AbstractEditorHandler` class API docs.
* class CustomEditorHandler extends AbstractEditorHandler {}
* // See the details of how to implement a custom handler in the `FullscreenAbstractEditorHandler` class API docs.
* class CustomEditorHandler extends FullscreenAbstractEditorHandler {}
*
* CustomEditorClass.create( document.querySelector( '#editor' ), {} )
* .then( ( editor ) => {
* editor.commands.get( 'toggleFullscreen' ).fullscreenHandler = new CustomEditorHandler( editor );
* } );
* ```
*/
public fullscreenHandler: AbstractEditorHandler;
public fullscreenHandler: FullscreenAbstractEditorHandler;

/**
* @inheritDoc
Expand All @@ -57,13 +58,13 @@ export class FullscreenCommand extends Command {

// Choose the appropriate handler based on the editor type.
// Currently only `ClassicEditor` and `DecoupledEditor` are supported. For other editor types, you should create a custom handler
// that extends `AbstractEditorHandler` and replace `fullscreenHandler` with it.
// that extends `FullscreenAbstractEditorHandler` and replace `fullscreenHandler` with it.
if ( isClassicEditor( editor ) ) {
this.fullscreenHandler = new ClassicEditorHandler( editor );
this.fullscreenHandler = new FullscreenClassicEditorHandler( editor );
} else if ( isDecoupledEditor( editor ) ) {
this.fullscreenHandler = new DecoupledEditorHandler( editor );
this.fullscreenHandler = new FullscreenDecoupledEditorHandler( editor );
} else {
this.fullscreenHandler = new AbstractEditorHandler( editor );
this.fullscreenHandler = new FullscreenAbstractEditorHandler( editor );
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ const DIALOG_OFFSET = 28;
* or if you wish to heavily customize the default behavior.
*
* The only method that is necessary to provide when extending this class is {@link #defaultOnEnter}. However, make sure to
* familiarize yourself with the below full list of actions taken by `AbstractEditorHandler` to understand what is covered by default,
* and what should be provided by you.
* familiarize yourself with the below full list of actions taken by `FullscreenAbstractEditorHandler` to understand
* what is covered by default, and what should be provided by you.
*
* When entering the fullscreen mode, the {@link #enable} method is called. It creates the properly styled container
* and handles the editor features that need it, in the following order:
Expand Down Expand Up @@ -73,7 +73,7 @@ const DIALOG_OFFSET = 28;
*
* This class is exported to allow for custom extensions.
*/
export class AbstractEditorHandler {
export class FullscreenAbstractEditorHandler {
/**
* Maps placeholder names to placeholder elements and moved elements.
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@
import { MenuBarView } from 'ckeditor5/src/ui.js';
import type { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';

import { AbstractEditorHandler } from './abstracteditorhandler.js';
import { FullscreenAbstractEditorHandler } from './abstracteditorhandler.js';

/**
* The classic editor fullscreen mode handler.
*/
export class ClassicEditorHandler extends AbstractEditorHandler {
export class FullscreenClassicEditorHandler extends FullscreenAbstractEditorHandler {
/**
* An editor instance.
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@

import type { DecoupledEditor } from '@ckeditor/ckeditor5-editor-decoupled';

import { AbstractEditorHandler } from './abstracteditorhandler.js';
import { FullscreenAbstractEditorHandler } from './abstracteditorhandler.js';

/**
* The decoupled editor fullscreen mode handler.
*/
export class DecoupledEditorHandler extends AbstractEditorHandler {
export class FullscreenDecoupledEditorHandler extends FullscreenAbstractEditorHandler {
/**
* An editor instance.
*/
Expand Down
6 changes: 3 additions & 3 deletions packages/ckeditor5-fullscreen/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ export { FullscreenEditing } from './fullscreenediting.js';
export { FullscreenUI } from './fullscreenui.js';
export { FullscreenCommand } from './fullscreencommand.js';

export { AbstractEditorHandler as FullscreenAbstractEditorHandler } from './handlers/abstracteditorhandler.js';
export { ClassicEditorHandler as FullscreenClassicEditorHandler } from './handlers/classiceditorhandler.js';
export { DecoupledEditorHandler as FullscreenDecoupledEditorHandler } from './handlers/decouplededitorhandler.js';
export { FullscreenAbstractEditorHandler } from './handlers/abstracteditorhandler.js';
export { FullscreenClassicEditorHandler } from './handlers/classiceditorhandler.js';
export { FullscreenDecoupledEditorHandler } from './handlers/decouplededitorhandler.js';

export type { FullscreenConfig } from './fullscreenconfig.js';

Expand Down
Loading