@ckeditor/ckeditor5-bookmark 0.0.0-nightly-20241025.0 → 0.0.1

package/src/insertbookmarkcommand.js

@@ -1,113 +0,0 @@
-/**
- * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-import { logWarning } from 'ckeditor5/src/utils.js';
-import { Command } from 'ckeditor5/src/core.js';
-import { isBookmarkIdValid } from './utils.js';
-/**
- * The insert bookmark command.
- *
- * The command is registered by {@link module:bookmark/bookmarkediting~BookmarkEditing} as `'insertBookmark'`.
- *
- * To insert a bookmark element at place where is the current collapsed selection or where is the beginning of document selection,
- * execute the command passing the bookmark id as a parameter:
- *
- * ```ts
- * editor.execute( 'insertBookmark', { bookmarkId: 'foo_bar' } );
- * ```
- */
-export default class InsertBookmarkCommand extends Command {
-    /**
-     * @inheritDoc
-     */
-    refresh() {
-        const model = this.editor.model;
-        const selection = model.document.selection;
-        const position = this._getPositionToInsertBookmark(selection);
-        this.isEnabled = !!position;
-    }
-    /**
-     * Executes the command.
-     *
-     * @fires execute
-     * @param options Command options.
-     * @param options.bookmarkId The value of the `bookmarkId` attribute.
-     */
-    execute(options) {
-        if (!options) {
-            return;
-        }
-        const { bookmarkId } = options;
-        if (!isBookmarkIdValid(bookmarkId)) {
-            /**
-             * Insert bookmark command can be executed only with a valid name.
-             *
-             * A valid bookmark name must be a non-empty string and must not contain any spaces.
-             *
-             * @error insert-bookmark-command-executed-with-invalid-name
-             */
-            logWarning('insert-bookmark-command-executed-with-invalid-name');
-            return;
-        }
-        const editor = this.editor;
-        const model = editor.model;
-        const selection = model.document.selection;
-        model.change(writer => {
-            let position = this._getPositionToInsertBookmark(selection);
-            const isBookmarkAllowed = model.schema.checkChild(position, 'bookmark');
-            // If the position does not allow for `bookmark` but allows for a `paragraph`
-            // then insert a `paragraph` then we will insert a `bookmark` inside.
-            if (!isBookmarkAllowed) {
-                const newPosition = editor.execute('insertParagraph', { position });
-                if (!newPosition) {
-                    return;
-                }
-                position = newPosition;
-            }
-            const bookmarkElement = writer.createElement('bookmark', {
-                ...Object.fromEntries(selection.getAttributes()),
-                bookmarkId
-            });
-            model.insertObject(bookmarkElement, position, null, { setSelection: 'on' });
-        });
-    }
-    /**
-     * Returns the position where the bookmark can be inserted. And if it is not possible to insert a bookmark,
-     * check if it is possible to insert a paragraph.
-     */
-    _getPositionToInsertBookmark(selection) {
-        const model = this.editor.model;
-        const schema = model.schema;
-        const firstRange = selection.getFirstRange();
-        const startPosition = firstRange.start;
-        // Return position if it is allowed to insert bookmark or if it is allowed to insert paragraph.
-        if (isBookmarkAllowed(startPosition, schema)) {
-            return startPosition;
-        }
-        for (const { previousPosition, item } of firstRange) {
-            // When the table cell is selected (from the outside) we look for the first paragraph-like element inside.
-            if (item.is('element') &&
-                schema.checkChild(item, '$text') &&
-                isBookmarkAllowed(item, schema)) {
-                return model.createPositionAt(item, 0);
-            }
-            if (isBookmarkAllowed(previousPosition, schema)) {
-                return previousPosition;
-            }
-        }
-        return null;
-    }
-}
-/**
- * Verify if the given position allows for bookmark insertion. Verify if auto-paragraphing could help.
- */
-function isBookmarkAllowed(position, schema) {
-    if (schema.checkChild(position, 'bookmark')) {
-        return true;
-    }
-    if (!schema.checkChild(position, 'paragraph')) {
-        return false;
-    }
-    return schema.checkChild('paragraph', 'bookmark');
-}

package/src/ui/bookmarkactionsview.d.ts

@@ -1,102 +0,0 @@
-/**
- * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module bookmark/ui/bookmarkactionsview
- */
-import { LabelView, ButtonView, View } from 'ckeditor5/src/ui.js';
-import { FocusTracker, KeystrokeHandler, type LocaleTranslate, type Locale } from 'ckeditor5/src/utils.js';
-import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
-import '../../theme/bookmarkactions.css';
-/**
- * The bookmark actions view class. This view displays the bookmark preview, allows
- * removing or editing the bookmark.
- */
-export default class BookmarkActionsView extends View {
-    /**
-     * Tracks information about DOM focus in the actions.
-     */
-    readonly focusTracker: FocusTracker;
-    /**
-     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-     */
-    readonly keystrokes: KeystrokeHandler;
-    /**
-     * The bookmark preview view.
-     */
-    bookmarkPreviewView: LabelView;
-    /**
-     * The remove button view.
-     */
-    removeButtonView: ButtonView;
-    /**
-     * The edit bookmark button view.
-     */
-    editButtonView: ButtonView;
-    /**
-     * The id preview view.
-     *
-     * @observable
-     */
-    id: string | undefined;
-    /**
-     * A collection of views that can be focused in the view.
-     */
-    private readonly _focusables;
-    /**
-     * Helps cycling over {@link #_focusables} in the view.
-     */
-    private readonly _focusCycler;
-    t: LocaleTranslate;
-    /**
-     * @inheritDoc
-     */
-    constructor(locale: Locale);
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * @inheritDoc
-     */
-    destroy(): void;
-    /**
-     * Focuses the fist {@link #_focusables} in the actions.
-     */
-    focus(): void;
-    /**
-     * Creates a button view.
-     *
-     * @param label The button label.
-     * @param icon The button icon.
-     * @param eventName An event name that the `ButtonView#execute` event will be delegated to.
-     * @param additionalLabel An additional label outside the button.
-     * @returns The button view instance.
-     */
-    private _createButton;
-    /**
-     * Creates a bookmark name preview label.
-     *
-     * @returns The label view instance.
-     */
-    private _createBookmarkPreviewView;
-}
-/**
- * Fired when the {@link ~BookmarkActionsView#editButtonView} is clicked.
- *
- * @eventName ~BookmarkActionsView#edit
- */
-export type EditEvent = {
-    name: 'edit';
-    args: [];
-};
-/**
- * Fired when the {@link ~BookmarkActionsView#removeButtonView} is clicked.
- *
- * @eventName ~BookmarkActionsView#remove
- */
-export type RemoveEvent = {
-    name: 'remove';
-    args: [];
-};

package/src/ui/bookmarkactionsview.js

@@ -1,154 +0,0 @@
-/**
- * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module bookmark/ui/bookmarkactionsview
- */
-import { LabelView, ButtonView, View, ViewCollection, FocusCycler } from 'ckeditor5/src/ui.js';
-import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils.js';
-import { icons } from 'ckeditor5/src/core.js';
-// eslint-disable-next-line ckeditor5-rules/ckeditor-imports
-import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
-import '../../theme/bookmarkactions.css';
-/**
- * The bookmark actions view class. This view displays the bookmark preview, allows
- * removing or editing the bookmark.
- */
-export default class BookmarkActionsView extends View {
-    /**
-     * @inheritDoc
-     */
-    constructor(locale) {
-        super(locale);
-        /**
-         * Tracks information about DOM focus in the actions.
-         */
-        this.focusTracker = new FocusTracker();
-        /**
-         * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-         */
-        this.keystrokes = new KeystrokeHandler();
-        /**
-         * A collection of views that can be focused in the view.
-         */
-        this._focusables = new ViewCollection();
-        const t = locale.t;
-        this.bookmarkPreviewView = this._createBookmarkPreviewView();
-        this.removeButtonView = this._createButton(t('Remove bookmark'), icons.remove, 'remove', this.bookmarkPreviewView);
-        this.editButtonView = this._createButton(t('Edit bookmark'), icons.pencil, 'edit', this.bookmarkPreviewView);
-        this.set('id', undefined);
-        this._focusCycler = new FocusCycler({
-            focusables: this._focusables,
-            focusTracker: this.focusTracker,
-            keystrokeHandler: this.keystrokes,
-            actions: {
-                // Navigate fields backwards using the Shift + Tab keystroke.
-                focusPrevious: 'shift + tab',
-                // Navigate fields forwards using the Tab key.
-                focusNext: 'tab'
-            }
-        });
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-bookmark-actions',
-                    'ck-responsive-form'
-                ],
-                // https://github.com/ckeditor/ckeditor5-link/issues/90
-                tabindex: '-1'
-            },
-            children: [
-                this.bookmarkPreviewView,
-                this.editButtonView,
-                this.removeButtonView
-            ]
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        const childViews = [
-            this.editButtonView,
-            this.removeButtonView
-        ];
-        childViews.forEach(v => {
-            // Register the view as focusable.
-            this._focusables.add(v);
-            // Register the view in the focus tracker.
-            this.focusTracker.add(v.element);
-        });
-        // Start listening for the keystrokes coming from #element.
-        this.keystrokes.listenTo(this.element);
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-        this.focusTracker.destroy();
-        this.keystrokes.destroy();
-    }
-    /**
-     * Focuses the fist {@link #_focusables} in the actions.
-     */
-    focus() {
-        this._focusCycler.focusFirst();
-    }
-    /**
-     * Creates a button view.
-     *
-     * @param label The button label.
-     * @param icon The button icon.
-     * @param eventName An event name that the `ButtonView#execute` event will be delegated to.
-     * @param additionalLabel An additional label outside the button.
-     * @returns The button view instance.
-     */
-    _createButton(label, icon, eventName, additionalLabel) {
-        const button = new ButtonView(this.locale);
-        button.set({
-            label,
-            icon,
-            tooltip: true
-        });
-        button.delegate('execute').to(this, eventName);
-        // Since button label `id` is bound to the `ariaLabelledBy` property
-        // we need to modify this binding to include only the first ID token
-        // as this button will be labeled by multiple labels.
-        button.labelView.unbind('id');
-        button.labelView.bind('id').to(button, 'ariaLabelledBy', ariaLabelledBy => {
-            return getFirstToken(ariaLabelledBy);
-        });
-        button.ariaLabelledBy = `${button.ariaLabelledBy} ${additionalLabel.id}`;
-        return button;
-    }
-    /**
-     * Creates a bookmark name preview label.
-     *
-     * @returns The label view instance.
-     */
-    _createBookmarkPreviewView() {
-        const label = new LabelView(this.locale);
-        label.extendTemplate({
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-bookmark-actions__preview'
-                ]
-            }
-        });
-        // Bind label text with the bookmark ID.
-        label.bind('text').to(this, 'id');
-        return label;
-    }
-}
-/**
- * Returns the first token from space separated token list.
- */
-function getFirstToken(tokenList) {
-    return tokenList.split(' ')[0];
-}

package/src/ui/bookmarkformview.d.ts

@@ -1,118 +0,0 @@
-/**
- * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module bookmark/ui/bookmarkformview
- */
-import { ButtonView, LabeledFieldView, View, ViewCollection, type InputTextView } from 'ckeditor5/src/ui.js';
-import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
-import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
-import '../../theme/bookmarkform.css';
-/**
- * The bookmark form view controller class.
- *
- * See {@link module:bookmark/ui/bookmarkformview~BookmarkFormView}.
- */
-export default class BookmarkFormView extends View {
-    /**
-     * Tracks information about DOM focus in the form.
-     */
-    readonly focusTracker: FocusTracker;
-    /**
-     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-     */
-    readonly keystrokes: KeystrokeHandler;
-    /**
-     * The ID input view.
-     */
-    idInputView: LabeledFieldView<InputTextView>;
-    /**
-     * The Submit button view.
-     */
-    buttonView: ButtonView;
-    /**
-     * A collection of form child views in the form.
-     */
-    readonly children: ViewCollection;
-    /**
-     * An array of form validators used by {@link #isValid}.
-     */
-    private readonly _validators;
-    /**
-     * A collection of views that can be focused in the form.
-     */
-    private readonly _focusables;
-    /**
-     * Helps cycling over {@link #_focusables} in the form.
-     */
-    private readonly _focusCycler;
-    /**
-     * Creates an instance of the {@link module:bookmark/ui/bookmarkformview~BookmarkFormView} class.
-     *
-     * Also see {@link #render}.
-     *
-     * @param locale The localization services instance.
-     * @param validators  Form validators used by {@link #isValid}.
-     */
-    constructor(locale: Locale, validators: Array<BookmarkFormValidatorCallback>);
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * @inheritDoc
-     */
-    destroy(): void;
-    /**
-     * Focuses the fist {@link #_focusables} in the form.
-     */
-    focus(): void;
-    /**
-     * Validates the form and returns `false` when some fields are invalid.
-     */
-    isValid(): boolean;
-    /**
-     * Cleans up the supplementary error and information text of the {@link #idInputView}
-     * bringing them back to the state when the form has been displayed for the first time.
-     *
-     * See {@link #isValid}.
-     */
-    resetFormStatus(): void;
-    /**
-     * Creates header and form view.
-     */
-    private _createViewChildren;
-    /**
-     * Creates form content view with input and button.
-     */
-    private _createFormContentView;
-    /**
-     * Creates a labeled input view.
-     *
-     * @returns Labeled field view instance.
-     */
-    private _createIdInput;
-    /**
-     * Creates a button view.
-     *
-     * @param label The button label.
-     * @param className The additional button CSS class name.
-     * @returns The button view instance.
-     */
-    private _createButton;
-    /**
-     * The native DOM `value` of the {@link #idInputView} element.
-     *
-     * **Note**: Do not confuse it with the {@link module:ui/inputtext/inputtextview~InputTextView#value}
-     * which works one way only and may not represent the actual state of the component in the DOM.
-     */
-    get id(): string | null;
-}
-/**
- * Callback used by {@link ~BookmarkFormView} to check if passed form value is valid.
- *
- * If `undefined` is returned, it is assumed that the form value is correct and there is no error.
- * If string is returned, it is assumed that the form value is incorrect and the returned string is displayed in the error label
- */
-export type BookmarkFormValidatorCallback = (form: BookmarkFormView) => string | undefined;

package/src/ui/bookmarkformview.js

@@ -1,203 +0,0 @@
-/**
- * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module bookmark/ui/bookmarkformview
- */
-import { ButtonView, FocusCycler, LabeledFieldView, View, ViewCollection, createLabeledInputText, submitHandler, FormHeaderView } from 'ckeditor5/src/ui.js';
-import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils.js';
-// See: #8833.
-// eslint-disable-next-line ckeditor5-rules/ckeditor-imports
-import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
-import '../../theme/bookmarkform.css';
-/**
- * The bookmark form view controller class.
- *
- * See {@link module:bookmark/ui/bookmarkformview~BookmarkFormView}.
- */
-export default class BookmarkFormView extends View {
-    /**
-     * Creates an instance of the {@link module:bookmark/ui/bookmarkformview~BookmarkFormView} class.
-     *
-     * Also see {@link #render}.
-     *
-     * @param locale The localization services instance.
-     * @param validators  Form validators used by {@link #isValid}.
-     */
-    constructor(locale, validators) {
-        super(locale);
-        /**
-         * Tracks information about DOM focus in the form.
-         */
-        this.focusTracker = new FocusTracker();
-        /**
-         * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-         */
-        this.keystrokes = new KeystrokeHandler();
-        /**
-         * A collection of views that can be focused in the form.
-         */
-        this._focusables = new ViewCollection();
-        const t = locale.t;
-        this._validators = validators;
-        this.idInputView = this._createIdInput();
-        this.buttonView = this._createButton(t('Insert'), 'ck-button-action ck-button-bold');
-        this.buttonView.type = 'submit';
-        this.children = this._createViewChildren();
-        this._focusCycler = new FocusCycler({
-            focusables: this._focusables,
-            focusTracker: this.focusTracker,
-            keystrokeHandler: this.keystrokes,
-            actions: {
-                // Navigate form fields backwards using the Shift + Tab keystroke.
-                focusPrevious: 'shift + tab',
-                // Navigate form fields forwards using the Tab key.
-                focusNext: 'tab'
-            }
-        });
-        const classList = ['ck', 'ck-bookmark-view'];
-        this.setTemplate({
-            tag: 'form',
-            attributes: {
-                class: classList,
-                // https://github.com/ckeditor/ckeditor5-link/issues/90
-                tabindex: '-1'
-            },
-            children: this.children
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        submitHandler({
-            view: this
-        });
-        const childViews = [
-            this.idInputView,
-            this.buttonView
-        ];
-        childViews.forEach(v => {
-            // Register the view as focusable.
-            this._focusables.add(v);
-            // Register the view in the focus tracker.
-            this.focusTracker.add(v.element);
-        });
-        // Start listening for the keystrokes coming from #element.
-        this.keystrokes.listenTo(this.element);
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-        this.focusTracker.destroy();
-        this.keystrokes.destroy();
-    }
-    /**
-     * Focuses the fist {@link #_focusables} in the form.
-     */
-    focus() {
-        this._focusCycler.focusFirst();
-    }
-    /**
-     * Validates the form and returns `false` when some fields are invalid.
-     */
-    isValid() {
-        this.resetFormStatus();
-        for (const validator of this._validators) {
-            const errorText = validator(this);
-            // One error per field is enough.
-            if (errorText) {
-                // Apply updated error.
-                this.idInputView.errorText = errorText;
-                return false;
-            }
-        }
-        return true;
-    }
-    /**
-     * Cleans up the supplementary error and information text of the {@link #idInputView}
-     * bringing them back to the state when the form has been displayed for the first time.
-     *
-     * See {@link #isValid}.
-     */
-    resetFormStatus() {
-        this.idInputView.errorText = null;
-    }
-    /**
-     * Creates header and form view.
-     */
-    _createViewChildren() {
-        const children = this.createCollection();
-        const t = this.t;
-        children.add(new FormHeaderView(this.locale, { label: t('Bookmark') }));
-        children.add(this._createFormContentView());
-        return children;
-    }
-    /**
-     * Creates form content view with input and button.
-     */
-    _createFormContentView() {
-        const view = new View(this.locale);
-        const children = this.createCollection();
-        const classList = ['ck', 'ck-bookmark-form', 'ck-responsive-form'];
-        children.add(this.idInputView);
-        children.add(this.buttonView);
-        view.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: classList
-            },
-            children
-        });
-        return view;
-    }
-    /**
-     * Creates a labeled input view.
-     *
-     * @returns Labeled field view instance.
-     */
-    _createIdInput() {
-        const t = this.locale.t;
-        const labeledInput = new LabeledFieldView(this.locale, createLabeledInputText);
-        labeledInput.label = t('Bookmark name');
-        labeledInput.infoText = t('Enter the bookmark name without spaces.');
-        return labeledInput;
-    }
-    /**
-     * Creates a button view.
-     *
-     * @param label The button label.
-     * @param className The additional button CSS class name.
-     * @returns The button view instance.
-     */
-    _createButton(label, className) {
-        const button = new ButtonView(this.locale);
-        button.set({
-            label,
-            withText: true
-        });
-        button.extendTemplate({
-            attributes: {
-                class: className
-            }
-        });
-        return button;
-    }
-    /**
-     * The native DOM `value` of the {@link #idInputView} element.
-     *
-     * **Note**: Do not confuse it with the {@link module:ui/inputtext/inputtextview~InputTextView#value}
-     * which works one way only and may not represent the actual state of the component in the DOM.
-     */
-    get id() {
-        const { element } = this.idInputView.fieldView;
-        if (!element) {
-            return null;
-        }
-        return element.value.trim();
-    }
-}